title: Problem with using map to populate select in React / Material UI
body: <p>I'm trying to populate Material's UI  with a list of countries, like so:</p>
  
  <pre><code>import React from "react";
  import FormControl from "@material-ui/core/FormControl";
  import InputLabel from "@material-ui/core/InputLabel";
  import Select from "@material-ui/core/Select";
  import MenuItem from "@material-ui/core/MenuItem";
  import countries from "./data";
  
  const simpleCountrySelect = props =&gt; {
    return (
      &lt;&gt;
        &lt;FormControl&gt;
          &lt;InputLabel id="countrySelectLabel"&gt;Country&lt;/InputLabel&gt;
          &lt;Select labelId="countrySelectLabel" id="countrySelect" value=''&gt;
            {countries.map((code, name, index) =&gt; (
              &lt;MenuItem key={index} value={code}&gt;
                {name}
              &lt;/MenuItem&gt;
            ))}
          &lt;/Select&gt;
        &lt;/FormControl&gt;
      &lt;/&gt;
    );
  };
  
  export default simpleCountrySelect;
  </code></pre>
  
  <p>Uncontrolled component for the brevity sake. But I'm getting the following error:</p>
  
  <pre><code>Encountered two children with the same key, `.$.$.$[object Object]`. 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.
  </code></pre>
  
  <p>Here is sample of the <code>data.js</code> file:</p>
  
  <pre><code>export default [
    { code: "AD", name: "Andorra" },
    { code: "AE", name: "United Arab Emirates" },
    { code: "AF", name: "Afghanistan" },
    { code: "AG", name: "Antigua and Barbuda" }
  ];
  </code></pre>
  
  <p>What am I doing wrong here?</p>
  
  <p>EDIT: changed <code>key</code> from <code>code</code> to <code>index</code>, still nothing.</p>