title: Facebook React: Invariant Violation and elements than didn't mount automatically
body: <p>I am learning Facebook React by doing a small example.
  I decided check if my knowledge about the <code>this</code> binding was ok so I created three <code>React.class</code> where the mutable states are in the parent and the middle only pass the callbacks to the children to manipulate it.</p>
  
  <p>Basic structure:</p>
  
  <pre><code>- MainFrame (states here)
    - FriendBox (only pass the callbacks for change states to Friend)
      -Friend
  </code></pre>
  
  <p>Notice than I could use <code>transferThisProp</code> but actually I preferred made this "manually".</p>
  
  <p>FriendBox render contains this:</p>
  
  <pre><code>var allFriends = this.props.friends.map((function (f) {
    return(
      &lt;Friend key = {f.id}
              name = {f.name}
              select = {this.props.select}
      /&gt;
    )
  }).bind(this))  
  </code></pre>
  
  <p>Friend render contains this:</p>
  
  <pre><code>return(
    &lt;div className="friend"&gt;
      {this.props.name}
      &lt;a href="" onClick={this.props.select(this.props.key)}&gt;
        select
      &lt;/a&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <p>When running my code I get the following message:</p>
  
  <pre><code>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. 
  </code></pre>
  
  <p>The interesting part is that when using the react extension for chrome I can check that the virtual <code>DOM</code> is well and the bindings are ok. Everything looks fine except than the Child component for the first <code>Friend</code> element says <code>_lifeCycleState: "UNMOUNTED"</code></p>
  
  <p>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?</p>
  
  <p>Full Code: <a href="http://jsfiddle.net/RvjeQ/" rel="noreferrer">http://jsfiddle.net/RvjeQ/</a></p>