title: React return array of components to render is not nesting properly
body: <p>I have the following code in my React component render method</p>
  
  <pre><code>render: function() {
      return (
         &lt;div&gt;
             &lt;div&gt;div1&lt;/div&gt;
             &lt;div&gt;div2&lt;/div&gt;
             {this.getOtherDivs()}
         &lt;/div&gt;
      );
  },
  
  getOtherDivs: function() {
     return ([
         &lt;div&gt;div3&lt;/div&gt;,
         &lt;div&gt;div4&lt;/div&gt;       
     ]);
  },
  </code></pre>
  
  <p>However, these two divs <code>div3</code> and <code>div4</code> are nested into single array instead of being separate. </p>
  
  <p>When I do children.length for the top most div, I am getting 3 instead of 4. </p>
  
  <p>I don't want to wrap the last two divs in an enclosing div. </p>