title: Key warning in react.js
body: <p>I am getting this:</p>
  
  <blockquote>
    <p>Warning: Each child in an array or iterator should have a unique "key" prop.</p>
  </blockquote>
  
  <p>Here is my code of Dropdown Component:</p>
  
  <pre><code>render() {
      let dropDownClasses = [classes["im-dropdown"], classes[this.state.size], classes[this.state.dropStyle], classes[this.status]];
      let itemcount = -1;
      let options;
      if(this.state.options !== undefined){
          options = this.state.options.map(option =&gt; {
              itemcount++;
              return(&lt;div&gt;&lt;li key ={'opt_'+this.state.name+'_'+itemcount}  role="option" aria-selected="false" value={option.value} tabIndex={itemcount} onClick={this.handleSelect.bind(this, this.state.name, option.value, option.text)}&gt;  {option.text} &lt;/li&gt;&lt;/div&gt;)
          });
      }
  
      return (
          &lt;div className={dropDownClasses.join(' ')}&gt;
              &lt;button aria-haspopup="listbox" aria-expanded="false" onClick={this.handleOpen}&gt;
                  &lt;span&gt;{this.state.label}&lt;/span&gt;&lt;span className={classes["caret"]}&gt;&lt;i className="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;ul className={classes["options"]} role="listbox" aria-labelledby={"im-drop_" +this.state.size+"_"+this.state.dropStyle} &gt;
                  &lt;span key ={'opt_'+this.state.name+'_'+itemcount}&gt;{options} &lt;/span&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>and I am calling it through another component as SideDrawer.js like this:</p>
  
  <pre><code>    &lt;div&gt;
          &lt;span className ={classes["filter"]}&gt;&lt;strong&gt;FILTER BY&lt;/strong&gt;&lt;/span&gt;
      &lt;/div&gt; 
      &lt;Dropdown key={'opt_'+ clientDropdown.label} label={clientDropdown.label} name={clientDropdown.name} options={clientDropdown.options} action={props.formHandler}/&gt;
      &lt;Dropdown  label={typeDropdown.label} name={typeDropdown.name} options={typeDropdown.options} action={props.formHandler}/&gt;
      &lt;Dropdown  label={categoryDropdown.label} name={categoryDropdown.name} options={categoryDropdown.options} action={props.formHandler}/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The warning seems to be coming since I am invoking Dropdown components multiple times in a single div (more like an array of items) thereby causing Key warning. I tried to use "key" as a prop but it doesn't _</p>