Cannot pass a function to child component in react?

Question

I don't know why but I cannot set an onClick function for a function from the parent that I want to pass to my child component. This is the code from the parent:

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

and the code on the child component:

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>
    )
  }
}

The onClick is invoked upon mount? and when I click it's not invoked? but I can invoke it by onClick if I don't pass an argument on it. A code like this but I cannot have referrence:

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

You're calling it-not sure what you expect. Are you actually asking how to use it but pass a parameter? — Dave Newton
– Dave Newton, Commented Aug 9, 2017 at 14:41

Murat Karagöz · Accepted Answer · 2017-08-09 14:43:15Z

6

You have to add it as a callback function otherwise it will get called immediately. Change it to this

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

answered Aug 9, 2017 at 14:43

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gpbaculio Over a year ago

do you have some links so I can read more on this? it works but I feel like missing something

Murat Karagöz Over a year ago

@iamnewbie The React Tutorials are a nice start, but that one is JavaScript specific. facebook.github.io/react/docs/handling-events.html

Collectives™ on Stack Overflow

Cannot pass a function to child component in react?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related