title: Conditionally render list with Higher Order Component
body: <p>My app has a feature toggle functionality that tells my UI whether or not a piece of UI should be rendered. I would like to create a Higher Order Component to conditionally render these types of components. In one scenario, I'm trying to conditionally render a list, but I'm running into this error:</p>
  
  <pre><code>ConditionalRender(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
  </code></pre>
  
  <p>This makes sense since I just am trying to render the children of this component. Here's what I've got so far:</p>
  
  <p><a href="https://jsfiddle.net/fmpeyton/cykmyabL/" rel="nofollow noreferrer">https://jsfiddle.net/fmpeyton/cykmyabL/</a></p>
  
  <pre><code>var settings = { showHello: true, showGoodbye: false};
  
  function ConditionalRender (props) {
      var output = null;
  
    if(props.shouldRender) output = props.children;
  
    console.log(output);
    // return (&lt;li&gt;{output}&lt;/li&gt;); // This works, but isn't desired html structure
    return ({output});
  }
  
  function App (props) {
      return (
      &lt;ul&gt;
          &lt;ConditionalRender shouldRender={props.settings.showHello}&gt;
          &lt;li&gt;Hello!&lt;/li&gt;
        &lt;/ConditionalRender&gt;
        &lt;ConditionalRender shouldRender={props.settings.showGoodbye}&gt;
            &lt;li&gt;Goodbye...&lt;/li&gt;
          &lt;/ConditionalRender&gt;
      &lt;/ul&gt;
    );
  }
  
  ReactDOM.render(
    &lt;App settings={settings} /&gt;,
    document.getElementById('container')
  );
  </code></pre>
  
  <p>If I can help it, I would just like to render the children without any additional logic.This HOC would also handle more complex children down the line. Something like this:</p>
  
  <pre><code>&lt;ConditionalRender shouldRender={props.settings.showHello}&gt;
  &lt;div&gt;
  &lt;p&gt; blah blah blah&lt;/p&gt;
  &lt;table&gt;
  &lt;!-- ... --&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/ConditionalRender&gt;
  </code></pre>
  
  <p>Any ideas?</p>