title: React conditional rendering of multiple child components
body: <p>I'm trying to render multiple child components depending on state however I'm only able to return one child component (SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag)</p>
  
  <p>Each child component passes the same props, how could this code be kept DRY?</p>
  
  <p>Works</p>
  
  <pre><code>export default ({changeState, myState, handleClick}) =&gt; (
      &lt;Navigation&gt;
              &lt;span&gt;Navigation&lt;/span&gt;
              &lt;button onClick={() =&gt; changeState()}&gt;Navigation&lt;/button&gt;
              { myState ?
                  &lt;NavigationItem handleClick={handleClick} title={'#Link-1'} /&gt;
                : null
              }
      &lt;/Navigation&gt;
  )
  </code></pre>
  
  <p>Don't</p>
  
  <pre><code>export default ({changeState, myState, handleClick}) =&gt; (
      &lt;Navigation&gt;
              &lt;h1&gt;Navigation&lt;/h1&gt;
              &lt;button onClick={() =&gt; changeState()}&gt;Navigation&lt;/button&gt;
              { myState ?
                  &lt;NavigationItem handleClick={handleClick} title={'#Link-1'} /&gt;
                  &lt;NavigationItem handleClick={handleClick} title={'#Link-2'} /&gt;
                  &lt;NavigationItem handleClick={handleClick} title={'#Link-3'} /&gt;
                : null
              }
      &lt;/Navigation&gt;
  )
  </code></pre>