title: React HOC with multiple components
body: <p>I want to create a React HOC that would ideally receive two components instead of one wrapped component and toggle between them. That is, in the code below, instead of <code>&lt;h3&gt;component one&lt;/h3&gt;</code> and <code>&lt;h3&gt;component two&lt;h3&gt;</code>, they would each represent child components. How would I be able to accomplish this? Some psuedo code for how I would write this HOC:</p>
  
  <pre><code>&lt;HOC&gt;
    &lt;ComponentOne /&gt;
    &lt;ComponentTwo /&gt;
  &lt;/HOC&gt;
  
  &lt;HOC
    componentOne={&lt;ComponentOne /&gt;}
    componentTwo={&lt;ComponentTwo /&gt;}
  /&gt;
  
  hoc(componentOne, componentTwo)
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class HOC extends React.Component {
      constructor() {
      super();
      this.state = {
        onClick: false,
      };
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleClick() {
      this.setState({onClick: !this.state.onClick});
    }
      
  
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.handleClick}&gt;Click Me!&lt;/button&gt;
          { 
            this.state.onClick ?
              &lt;h3&gt;component one&lt;/h3&gt; :
              &lt;h3&gt;component two&lt;/h3&gt;
          }
        &lt;/div&gt;
      );
    }
  }
  
  
  
  ReactDOM.render(&lt;HOC /&gt;, app);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>