Estoy creando una aplicación con la API de Google Books y parece que estoy pasando una clave única a cada niño de la lista, pero el error no desaparece. Debo estar haciendo algo mal, pero no estoy seguro de qué.

 const BookList = (props) => { //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) => { console.log(book.id) return ( <div className="col col-lg-4 grid-wrapper"> <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} /> </div> ); }) return ( <div>{books}</div> ); }

Tenga en cuenta que después de la devolución en los libros constantes, tengo un archivo console.log (book.id), que mostrará las 10 claves de identificación únicas en la consola. Pero cuando trato de pasarlo al elemento secundario de este componente usando key={book.id}, aparece este error.