title: React context doesn't transfer when using a component as prop
body: <p>I'm using react-bootstrap's ModalTrigger to show a field-heavy modal (based on react-bootstrap's Modal), which means sending it a bunch of props:</p>
  
  <pre><code>&lt;ModalTrigger modal={&lt;MyModal field1={value1} field2={value2} (more fields...)/&gt;}&gt;
      Click here to open
  &lt;/ModalTrigger&gt;
  </code></pre>
  
  <p>The parent component that creates the trigger has the fields/values passed in via props, and the parent component of <em>that</em> component has it passed as props as well, by the top-level component that actually holds the data. Both are basically pipes, which is a classic childContext scenario, except that it doesn't work. Here's a simplified version of what I've tried:</p>
  
  <pre><code>var MyModal = React.createClass({
      contextTypes : {foo : React.PropTypes.string},
      render : function() {
          return (
              &lt;Modal {...this.props} title="MyTitle"&gt;
                  &lt;div className="modal-body"&gt;
                      The context is {this.context.foo}
                  &lt;/div&gt;
              &lt;/Modal&gt;
          );
      }
  });
  
  var Content = React.createClass({
      childContextTypes : {foo: React.PropTypes.string},
      getChildContext : function() {return {foo : "bar"}},
      render : function() {
          return (
              &lt;ModalTrigger modal={&lt;MyModal/&gt;}&gt;
                  &lt;span&gt;Show modal&lt;/span&gt;
              &lt;/ModalTrigger&gt;
          )
      }
  });
  </code></pre>
  
  <p>The modal pops up with "The context is", without showing the actual context. </p>
  
  <p>I believe this is happening because the prop sent to ModalTrigger is already rendered/mounted somehow, but I'm not sure why. To the best of my understanding, the owner of MyModal is the Content component, which means that the context should be ok, but this is not the case.</p>
  
  <p>Some more information: I already tried passing <code>{...this.props}</code> and <code>context={this.context}</code> to MyModal with no success. Also, maybe relevant, ModalTrigger uses cloneElement to make sure the modal's onRequestHide prop points to the trigger's hide function.</p>
  
  <p>So what am I missing here? :/</p>