title: Return objects array from React.render
body: <p>I think my title is not very clear, but I don't know how to entitle this question, so I gladly accept any improvements :)</p>
  
  <p>So, I am trying to create a ReactJS component, <code>UIBlogLoader</code> which would return one or more <code>UIBlogStoryCard</code> components. I will use a simplified example for this question. Here is my code:</p>
  
  <pre><code>var MyComponent = React.createClass({
    render: function() {
      var objects = [];
      for(var i = 0; i &lt; 10; i++) {
        objects.push( &lt;div&gt;Component with number {i}&lt;/div&gt; );
      }
      return objects;
    }
  });
  </code></pre>
  
  <p>This will give me an error saying that I return <code>undefined</code> from <code>render</code>.</p>
  
  <p>I found a way to make this work, but I don't want to create the <code>UIBlogStoryCard</code>s (in the simplified example, the <code>div</code>s) inside one other <code>&lt;div /&gt;</code>. <a href="http://codepen.io/victorbarbu/pen/MaObdN/" rel="nofollow">Here (on Codepen)</a> is the working code:</p>
  
  <pre><code>var MyComponent = React.createClass({
    render: function() {
      var objects = [];
      for(var i = 0; i &lt; 10; i++) {
        objects.push( &lt;div&gt;Component with number {i}&lt;/div&gt; );
      }
      return &lt;div&gt; {objects} &lt;/div&gt;;
    }
  });
  React.render(
    &lt;MyComponent /&gt;,
    document.getElementById("mountNode");
  );
  </code></pre>
  
  <p>But this will leave me with something like this:</p>
  
  <pre><code>&lt;div id="mountNode"&gt;
    &lt;div data-reactid=".0"&gt;
      &lt;span data-reactid=".0.0"&gt; &lt;/span&gt;
      &lt;div data-reactid=".0.1:0"&gt;
        &lt;span data-reactid=".0.1:0.0"&gt;Component &lt;/span&gt;
        &lt;span data-reactid=".0.1:0.1"&gt;0&lt;/span&gt;
      &lt;/div&gt;
      &lt;div data-reactid=".0.1:1"&gt;
        &lt;span data-reactid=".0.1:1.0"&gt;Component &lt;/span&gt;
        &lt;span data-reactid=".0.1:1.1"&gt;1&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;!-- and so on --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the inner <code>div</code>s to be direct children of <code>div#mountNode</code>. How can I achieve this?</p>