title: I assigned each element in my list a unique key, but am still receiving the 'Warning: Each child in a list should have a unique "key" prop.' error
body: <p>I am new to React and not sure why I am receiving this error. I assigned each list element a key in my map method, but am still getting an error saying each element should be assigned a key.
  Here is my code:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import &quot;./App.css&quot;;
  
  const namesURL = &quot;http://api.names.com/search/names&quot;; 
  
  function App() {
  const [names, setNames] = useState([]); 
  
    useEffect(() =&gt; { 
      getNames();
    }, []);
  
    const getNames = async () =&gt; {
      const response = await fetch(namesURL); 
      const jsonData = await response.json(); 
      jsonData.sort(function(a, b) { 
        let textA = a.name
        let textB = b.name
        return (textA &lt; textB) ? -1 : (textA &gt; textB) ? 1 : 0;
    }); 
      console.log(jsonData); 
      setNames(jsonData); 
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
         {names.map(name =&gt; ( 
           &lt;ul&gt;
            &lt;li key={name.id}&gt; 
              &lt;h2&gt;{name.name}&lt;/h2&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;img src={name.image} alt=&quot;image&quot;&gt;&lt;/img&gt;
              &lt;hr&gt;&lt;/hr&gt;
            &lt;/li&gt;
            &lt;/ul&gt;
            ))}  
        &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>