title: React.js confuse with 'two children with the same key'
body: <p>I'm using react to mounting two same components on a page,</p>
  
  <pre><code>var SelectBox = React.createClass({
    getDefaultProps: function() {
      return {
        value: []
      };
    },
    getInitialState: function() {
      return {checked: this.props.value,count: 1};
    },
    handleClick: function() {
      var opt = this.state.checked;
      opt.push({id: this.state.count, name: this.state.count});
      this.setState({checked: opt, count: this.state.count + 1});
    },
    render: function() {
      var that = this;
      var options = this.state.checked.map(item =&gt; &lt;option key={'checked-' + that.props.name + item.id} value={item.id}&gt;{item.name}&lt;/option&gt;);
      return (
        &lt;div&gt;
          &lt;select multiple={true}&gt;
            {options}
          &lt;/select&gt;
          &lt;button type="button" onClick={this.handleClick}&gt;add&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  });
  React.render(
    &lt;SelectBox name='one'/&gt;,
    document.getElementById('one')
  );
  React.render(
    &lt;SelectBox name='two'/&gt;,
    document.getElementById('two')
  );
  </code></pre>
  
  <p>then click the button of the 'one', it's alright, but when i click the button of the 'two', some  of 'one' crop up in 'two',why?? it make me confuse. console show:</p>
  
  <pre><code>Warning: flattenChildren(...): Encountered two children with the same key, `.$checked-two1`. Child keys must be unique; when two children share a key, only the first child will be used.
  </code></pre>
  
  <p>but just do some change</p>
  
  <pre><code>var a = [{id: 5, name: 5}];
  React.render(
    &lt;SelectBox name='one' value={a}/&gt;,
    document.getElementById('one')
  );
  </code></pre>
  
  <p>it work properly. 
  what happenned？is there something wrong or it's bug？</p>