title: React: Passing Props to Descendants
body: <p>Is there a recommended pattern for passing props to descendant components in React?</p>
  
  <p>Below, I'm passing the prop <code>callback</code> to a child component:</p>
  
  <pre class="lang-js prettyprint-override"><code>Master = React.createClass({
    render: function() {
      return (
        &lt;div&gt;
          &lt;ListComp items={this.props.items} callback={this.handleClick} /&gt;
        &lt;/div&gt;
      );
    }
  });
  
  ListComp = React.createClass({
    render: function() {
  
      this.props.items.forEach(function(item) {
        items.push(&lt;ItemView item={item} callback={this.props.callback} /&gt;);
      }, this);
  
      return (
        &lt;ul&gt;{items}&lt;/ul&gt;
      );
    }
  });
  </code></pre>
  
  <p>And then the <code>callback</code> prop gets handed down to the descendant component:</p>
  
  <pre class="lang-js prettyprint-override"><code>ItemComp = React.createClass({
    render: function() {
      return (
        &lt;li&gt;&lt;a onClick={this.handleClick} href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      );
    },
  
    handleClick: function(e) {
      e.preventDefault();
      this.props.callback();
    }
  });
  </code></pre>
  
  <p>Is it correct to pass the prop down twice like this or should I be referencing its inheritance somehow?</p>
  
  <p>I see a <code>transferPropsTo</code> method in the docs, and from logging it looks like I could get to <code>callback</code> from the descendant via <code>this.props.__owner__.props</code> but those double-double underscores make me think I shouldn't.</p>