Warning: Each child in a list should have a unique “key” prop

Question

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 wr

Answer 1

The key needs to go on the outermost returned element. In your specific case, that means changing this:

            <div className="col col-lg-4 grid-wrapper">
                <BookCard 
                    key={book.id}

to this:

            <div className="col col-lg-4 grid-wrapper" key={book.id}>
                <BookCard