Facebook React: Invariant Violation and elements than didn't mount automatically

Question

I am learning Facebook React by doing a small example. I decided check if my knowledge about the `this` binding was ok so I created three `React.class` where the mutable states are in the parent and the middle only pass the callbacks to the children to manipulate it. Basic structure: ``` - MainFrame (states here) - FriendBox (only pass the callbacks for change states to Friend) -Friend ``` Notice than I could use `transferThisProp` but actually I preferred made this "manually". FriendBox render contains this: ``` var allFriends = this.props.friends.map((function (f) { return( ) }).bind(this)) ``` Friend render contains this: ``` return(

{this.props.name} select

) ``` When running my code I get the following message: ``` MainFrame.sendToFriendH: Invariant Violation: receiveComponent(...): Can only update a mounted component. r…

Accepted Answer

When you write

```
onClick={this.props.select(this.props.key)}
```

you're calling the `this.props.select` handler immediately and setting its result as the onClick handler. I'm guessing you want to instead do a partial application, which you can do using an arrow function:

```
onClick={(e) => this.props.select.bind(this.props.key, e)}
```

If you don't care about the event arg, you can skip it.

You can also use `.bind()` like so:

```
onClick={this.props.select.bind(null, this.props.key)}
```

Facebook React: Invariant Violation and elements than didn't mount automatically

Solution

Problem