title: React.js how to pass callbacks to child components?
body: <p>I would like to pass a callback to a doubly nested component, and while I am able to pass the properties effectively, I can't figure out how to bind the callback to the correct component so that it's triggered.  My structure looks like this:</p>
  
  <pre><code>-OutermostComponent
      -FirstNestedComponent
          -SecondNestedComponent
              -DynamicallyGeneratedListItems
  </code></pre>
  
  <p>The List Items when clicked should trigger a callback which is the OutermostComponents method "onUserInput", but instead I get "Uncaught Error: Undefined is not a function".  I suspect the problem is in how I am rendering the SecondNestedComponent inside the first, and passing it the callback.  The code looks something like this:</p>
  
  <pre><code>var OutermostComponent = React.createClass({
      onUserInput: //my function,
      render: function() {
          return (
              &lt;div&gt;
              //other components 
                  &lt;FirstNestedComponent
                      onUserInput={this.onUserInput}
                  /&gt;
              &lt;/div&gt;
          );
      }
  });
  
  var FirstNestedComponent = React.createClass({
      render: function() {
          return (
              &lt;div&gt;
              //other components 
                  &lt;SecondNestedComponent
                      onUserInput={this.onUserInput}
                  /&gt;
              &lt;/div&gt;
          );
      }
  });
  var SecondNestedComponent = React.createClass({
      render: function() {
          var items = [];
          this.props.someprop.forEach(function(myprop) {
              items.push(&lt;DynamicallyGeneratedListItems myprop={myprop} onUserInput={this.props.onUserInput}/&gt;);}, this);
          return (
              &lt;ul&gt;
                  {items}
              &lt;/ul&gt;
          );
      }
  });
  </code></pre>
  
  <p>How do I correctly bind callbacks to the appropriate nested components?</p>