title: how to have no enclosing tags with React?
body: <p>I want a component to return sibling tags instead of a single parent tag. For example render method of <code>DefaultItems</code> should return something that renders as <code>&lt;li/&gt;&lt;li/&gt;</code> instead of say, <code>&lt;div&gt;&lt;li/&gt;&lt;li/&gt;&lt;/div&gt;</code>. But React <strong>needs enclosing tag</strong> when returning something.</p>
  
  <p>Is there some null tag which does not insert into the final markup?</p>
  
  <p>JSX:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;DefaultItems/&gt;
  &lt;OtherItems/&gt;
  &lt;li&gt;
  </code></pre>
  
  <p>Desired:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;default 1&lt;/li&gt;
  &lt;li&gt;default 2&lt;/li&gt;
  &lt;li&gt;other 1&lt;/li&gt;
  &lt;li&gt;
  </code></pre>
  
  <p>The best I can do, notice the unwanted div around the li:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;div&gt;
  &lt;li&gt;default 1&lt;/li&gt;
  &lt;li&gt;default 2&lt;/li&gt;
  &lt;/div&gt;
  &lt;li&gt;other 1&lt;/li&gt;
  &lt;li&gt;
  </code></pre>
  
  <p>I wish a "null tag" exists:</p>
  
  <pre><code>return &lt;nulltag&gt;
  &lt;li&gt;default 1&lt;/li&gt;
  &lt;li&gt;default 2&lt;/li&gt;
  &lt;/nulltag&gt;
  </code></pre>