title: How to group <li> in ReactJS
body: <p>Say I wanted to do something like</p>
  
  <pre><code>const MyElement = (props) =&gt; (
      &lt;ul&gt;
          &lt;li&gt;First&lt;/li&gt;
          {condition ? &lt;li&gt;Thing 1&lt;/li&gt;&lt;li&gt;Thing 2&lt;/li&gt; : null}
          &lt;li&gt;Second&lt;/li&gt;
      &lt;/ul&gt;
  )
  </code></pre>
  
  <p>Obviously that won't work. I could instead do something like</p>
  
  <pre><code>const MyElement = (props) =&gt; (
      &lt;ul&gt;
          &lt;li&gt;First&lt;/li&gt;
          {condition ? &lt;li&gt;Thing 1&lt;/li&gt; : null}
          {condition ? &lt;li&gt;Thing 2&lt;/li&gt; : null}
          &lt;li&gt;Second&lt;/li&gt;
      &lt;/ul&gt;
  )
  </code></pre>
  
  <p>or</p>
  
  <pre><code>const MyElement = (props) =&gt; {
      const thing = &lt;span&gt;&lt;li&gt;Thing 1&lt;/li&gt;&lt;li&gt;Thing 2&lt;/li&gt;&lt;/span&gt;;
  
      return (
          &lt;ul&gt;
              &lt;li&gt;First&lt;/li&gt;
              {condition ? thing.props.children : null}
              &lt;li&gt;Second&lt;/li&gt;
          &lt;/ul&gt;
      );
  }
  </code></pre>
  
  <p>Is there a cleaner or recommended way to do something like this?</p>