title: React.js: Passing a callback to a child component and removing a component
body: <p>Here is a link to the source <a href="https://github.com/bengrunfeld/gae-react-flux-todos/tree/master/src/js" rel="nofollow">https://github.com/bengrunfeld/gae-react-flux-todos/tree/master/src/js</a></p>
  
  <p>In the React tutorial, it shows how to pass a callback to a child component, which can then go ahead and use it.</p>
  
  <p>Say you want to generate a list of Todos, but pass each Todo a callback so that if the <code>delete</code> button is hit on that todo, it will call the function <code>removeTodo</code> in its parent (<code>TodoList</code>) that will remove it from the DOM.</p>
  
  <p>So the problem I'm running into is that in the following example, because of the scope of <code>this.props.data.map</code>, I can't pass <code>this.removeTodo</code> to <code>&lt;Todo&gt;</code>. It errors out as <code>undefined</code> if you try it.</p>
  
  <p>Secondly, even if I could, I am not sure how to go about removing the Todo from the DOM, as I don't have access to a mutable version of <code>state</code> inside <code>TodoList</code> - it is only available as an immutable <code>this.props</code>. If I could alter <code>state</code>, I could then call <code>setState</code>, which would fire a render, which would remove the items from the list. </p>
  
  <p>So how would you solve this?</p>
  
  <pre><code>var TodoList = React.createClass({
    removeTodo: function(todo) {
      // Remove Todo
      // Change the state
      // Re-render with setState();
    },
    render:function(){
      var todoNodes = this.props.data.map(function(todo) {
        return (
          &lt;Todo key={todo.id} id={todo.id} onRemoveTodo={this.removeTodo}&gt;
            {todo.title}
          &lt;/Todo&gt;
        );
      });
      return (
        &lt;div className="todoList"&gt;
          {todoNodes}
        &lt;/div&gt;
      )
    }
  var Todo = React.createClass({
    onDeleteClick: function(todo){
      AppActions.deleteTodo({id: todo.target.className});
  
      // Call the `removeTodo` function in `TodoList` (parent) here!
      // this.props.onRemoveTodo
    },
    render:function(){
      return (
        &lt;div&gt;&lt;p&gt;{this.props.children} - &lt;a className={this.props.id} onClick={this.onDeleteClick}&gt;delete&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
      )
    }
  });
  </code></pre>