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(

    <Friend key = {f.id}

            name = {f.name}

            select = {this.props.select}

    />

  )

}).bind(this))  

Friend render contains this:

return(

  <div className=friend>

    {this.props.name}

    <a href= onClick={this.props.select(this.props.key)}>

      select

    </a>

  </div>

)

When running my code I get the following message:

MainFrame.sendToFriendH:

  Invariant Violation: receiveComponent(...):

  Can only update a mounted component. react.js:7276

Uncaught Error: Invariant Violation:

  receiveComponent(...): Can only update a mounted component. 

The interesting part is that when using the react extension for chrome I can check that the virtual DOM is well and the bindings are ok. Everything looks fine except than the Child component for the first Friend element says _lifeCycleState: UNMOUNTED

This made me think than I am doing a mistake where the bottom child is not being rendered and mounted.
All the code fails but I don't know exactly why.
Can anyone can tell me why the element is not automatically mounted and how can I fix it?

Full Code: http://jsfiddle.net/RvjeQ/