title: Issues with key in React map
body: <p>I am trying to generate unique key while iterating over map by appending label name with index.</p>
  
  <p>please find the below snippet.</p>
  
  <pre><code>const controls = [
    { label: "Salad", type: "salad" },
    { label: "Bacon", type: "bacon" },
    { label: "Cheese", type: "cheese" },
    { label: "Meat", type: "meat" }
  ];
  
  const BuildControls = props =&gt; (
    &lt;div className="BuildControls"&gt;
      {controls.map((item, index) =&gt; (
        &lt;BuildControl
          ```key={item.label + index}```
          label={item.label}
          added={() =&gt; props.ingredientsAdded(item.type)}
          removed={() =&gt; props.ingredientsRemoved(item.type)}
          disabled={props.disabled[item.type]}
        /&gt;
      ))}
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>I am getting following error when i am trying to add items repeatedly.</p>
  
  <blockquote>
    <p>Warning: Encountered two children with the same key, <code>1</code>. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
        in div (created by burgers)
        in burgers (created by BurgerBuilder)
        in Aux (created by BurgerBuilder)
        in BurgerBuilder (created by App)
        in div (created by App)
        in App</p>
  </blockquote>