title: React Warning: flattenChildren(...): Encountered two children with the same key
body: <p>Could someone please explain how to fix this error </p>
  
  <blockquote>
    <p>Warning: flattenChildren(...): Encountered two children with the same
    key</p>
  </blockquote>
  
  <p>I have replicated my code below, but for some reason CodePen is not showing the error.</p>
  
  <pre><code>var FilterOptions = React.createClass({
  changeOption: function(type, e) {
  var val = e.target.value;
  this.props.changeOption(val, type);
  },
  
  render: function() {
  
  return (
    &lt;div className="filter-options"&gt;
      &lt;div className="filter-option"&gt;
        &lt;select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, 'product')}&gt;
        &lt;option value=''&gt;Product&lt;/option&gt;
        {this.props.productOptions.map(function(option) {
          return (&lt;option key={option}  value={option}&gt;{option}&lt;/option&gt;)
        })}
        &lt;/select&gt;
    &lt;/div&gt;
    &lt;/div&gt;
   );
   }
   });
  </code></pre>
  
  <p><a href="http://codepen.io/co851002/pen/pRNdyM?editors=1111" rel="noreferrer">Codepen</a></p>
  
  <p>As a secondary question, I am pretty sure my reset is supposed to reset the values of the select boxes but this is also not working and just resetting the rendered results - not sure if this is related to the first problem?</p>
  
  <p>Any help much appreciated</p>