title: React rendering in a loop stops after first element
body: <p>I am rendering multiple divs using the class but I see only the first div rendered.</p>
  
  <pre><code>&lt;html&gt; 
  &lt;body&gt; 
    &lt;div class="elem" name="foo"/&gt;
    &lt;div class="elem" name="bar"/&gt;
    &lt;script src="public/bundle.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>JSX:</p>
  
  <pre><code>import React from 'react';
  import {render} from 'react-dom';
  
  class MyElement extends React.Component {
      render () {
          return &lt;div&gt;NAME: {this.props.name}&lt;/div&gt;
      }
  }
  
  var divs = document.getElementsByClassName('elem');
  Array.prototype.forEach.call(divs, function(div, index) {
      render(&lt;MyElement name={div.getAttribute('name')}/&gt;, div);
  }); 
  </code></pre>
  
  <p>I only see "NAME: foo" but no "NAME: bar". I even tried adding "key={index}" to  element but no use.</p>
  
  <p>Here are the dependencies used:</p>
  
  <pre><code>"dependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1"
  }
  </code></pre>