title: What's the best way to inject a React component into another React component? Or should I bother?
body: <p>While working on my first large React application, I started feeling uneasy about the tight coupling of nested components, especially when writing unit tests. </p>
  
  <p>If is a high-level component, and its render function returns <code>&lt;div&gt;&lt;Bar&gt;&lt;Baz /&gt;&lt;/Bar&gt;&lt;/div&gt;</code>, I would like to be able to test Foo, Bar, and Baz in isolation.</p>
  
  <p>I searched for advice but didn't find any. So, on my own, I came up with two methods of injection: factory functions and via the outer component's properties. (I am not talking about Children. I'm talking about "baked in" dependencies--the sort people usually import via require or import statements.</p>
  
  <h2>Properties</h2>
  
  <pre><code>const Baz = React.createClass({
    render() {
      return &lt;p&gt;Inner&lt;/p&gt;;
    }
  });
  
  const Foo = React.createClass({
    render() {
      const Bar = this.props.innerComponent;
      return &lt;Bar /&gt;;
    }
  });
  
  ReactDOM.render(
    &lt;Foo innerComponent={Baz} /&gt;,
    document.getElementById('container')
  );
  </code></pre>
  
  <h2>Factory</h2>
  
  <pre><code>const Baz = React.createClass({
   render() {
     return &lt;p&gt;Inner&lt;/p&gt;;
   }
  });
  
  const fooFactory = innerComponent =&gt; {
    return  React.createClass({
      render() {
        const Bar = innerComponent;
        return &lt;Bar /&gt;;
     }
   });
  };
  
  const Foo = fooFactory(Baz);
  
  ReactDOM.render(
    &lt;Foo innerComponent={Baz} /&gt;,
    document.getElementById('container')
  );
  </code></pre>
  
  <p>Or am I just taking decoupling too far? I see almost no one else doing this in any tutorials or examples. </p>
  
  <p>Would you be inclined to inject components sometimes but not other times? In what circumstances? And, if you did it, would you use one of the above techniques or do it some other way? </p>