反応内の子コンポーネントに関数を渡すことはできませんか？

Question

理由は分かりませんが、子コンポーネントに渡す親の関数に対してonClick関数を設定できません。これは、親からのコードです：

_renderChatFriend() { 
    return([...this.state.friendsNames].map(friend => { 
     return (<ChatFriendPopUp 
      onChatFriendPopUpClick={this.popUpMessage} 
      key={friend.id} 
      name={friend.name} 
     />) 
    })) 
    } 

と子コンポーネントのコード：

class ChatFriendPopUp extends Component { 
    popUpMessage(name) { 
    console.log("name clicked ",name) 
    } 
    render() { 
    return (
     <li onClick={this.props.onChatFriendPopUpClick(this.props.name)}>{this.props.name}</li> 
    ) 
    } 
} 

onClickのはマウント時に呼び出されますか？クリックすると呼び出されません。私は引数を渡さないとonClickで呼び出すことができます。このようなコードですが、参照はできません。

<li onClick={this.props.onChatFriendPopUpClick}> // not passing argument works? 

Answer 1

コールバック関数として追加する必要があります。それ以外の場合はすぐに呼び出されます。これに変更する

<li onClick={() => this.props.onChatFriendPopUpClick(this.props.name)}>{this.props.name}</li>