title: How to avoid extra wrapping <div> in React?
body: <p>Today I have started learning ReactJS and after an hour faced with the problem..
  I want to insert a component which has two rows inside a div on the page.A simplified example of what I am doing below.</p>
  
  <p>I have an html:</p>
  
  <pre><code>&lt;html&gt;
  ..
    &lt;div id="component-placeholder"&gt;&lt;/div&gt;
  ..
  &lt;/html&gt;
  </code></pre>
  
  <p>Render function like this:</p>
  
  <pre><code>...
  render: function() {
  
      return(
          &lt;div className="DeadSimpleComponent"&gt;
              &lt;div className="DeadSimpleComponent__time"&gt;10:23:12&lt;/div &gt;
              &lt;div className="DeadSimpleComponent__date"&gt;MONDAY, 2 MARCH 2015&lt;/div&gt;
          &lt;/div&gt;
      )
  }
  ....
  </code></pre>
  
  <p>And below I am calling render:</p>
  
  <pre><code>ReactDOM.render(&lt;DeadSimpleComponent/&gt;, document.getElementById('component-placeholder'));
  </code></pre>
  
  <p>Generated HTML looks like this:</p>
  
  <pre><code>&lt;html&gt;
  ..
    &lt;div id="component-placeholder"&gt;
      &lt;div class="DeadSimpleComponent"&gt;
              &lt;div class="DeadSimpleComponent__time"&gt;10:23:12&lt;/div&gt;
              &lt;div class="DeadSimpleComponent__date"&gt;MONDAY, 2 MARCH 2015&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  ..
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem that I am not a very happy that React forcing me to wrap all in a div "DeadSimpleComponent". What is the best and simple workaround for it, without explicit DOM manipulations?</p>
  
  <p><strong>UPDATE 7/28/2017: Maintainers of React added that possibility in React 16 Beta 1</strong></p>
  
  <p>Since <a href="https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html" rel="noreferrer">React 16.2</a>, you can do this:</p>
  
  <pre><code>render() {
    return (
      &lt;&gt;
        &lt;ChildA /&gt;
        &lt;ChildB /&gt;
        &lt;ChildC /&gt;
      &lt;/&gt;
    );
  }
  </code></pre>