title: Warning: Each child in a list should have a unique "key" prop
body: <p>I'm building an app using the Google Books API and I appear to be passing a unique key to each child in the list, but the error won't go away. I must be doing something wrong but I'm not sure what.</p>
  <pre class="lang-js prettyprint-override"><code>const BookList = (props) =&gt; {
      //map over all of the book items to create a new card for each one in the list
      const books = props.books.data.items.map((book) =&gt; {
          console.log(book.id);
          return (
              &lt;div className=&quot;col col-lg-4 grid-wrapper&quot;&gt;
                  &lt;BookCard
                      key={book.id}
                      image={book.volumeInfo.imageLinks.thumbnail}
                      title={book.volumeInfo.title}
                      author={book.volumeInfo.authors[0]}
                      description={book.volumeInfo.description}
                      previewLink={book.volumeInfo.previewLink}
                      buyLink={book.saleInfo.buyLink}
                  /&gt;
              &lt;/div&gt;
          );
      });
  
      return &lt;div&gt;{books}&lt;/div&gt;;
  };
  </code></pre>
  <p>Notice that after the return in <code>const books</code> I have a <code>console.log(book.id)</code>, which will display all 10 unique <code>id</code> keys in the console. But when I try to pass it to the child of this component using <code>key={book.id}</code>, I get this error.</p>