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 wrong but I'm not sure what.

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>;
};

Notice that after the return in const books I have a console.log(book.id), which will display all 10 unique id keys in the console. But when I try to pass it to the child of this component using key={book.id}, I get this error.

Joseph Sible-Reinstate Monica · Accepted Answer · 2019-07-29T19:19:59.620

150

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

edited Jul 29 '19 at 19:19

answered Mar 14 '19 at 02:05

Joseph Sible-Reinstate Monica

45,431
5
48
98

4

That did it! Is there a specific reason why the key has to be on the outermost returned element? – Matt Brody Mar 14 '19 at 02:28
18

When React goes through an array, it only looks at the things directly in it. It doesn't recurse all the way through looking for a key. If it did, it would (1) be slow, and (2) cause ambiguity when there were nested arrays. – Joseph Sible-Reinstate Monica Mar 14 '19 at 02:29
4

In case this got anyone else: If you define a custom component, and that's what's inside your list, the key has to go on the props of the component itself, NOT the DOM element that the component returns. – Mark P Neyer May 19 '22 at 12:54
1

That works for me as well, I had a parent element below the .map and it continued to complain about that, I was focusing on the nested list for several hours, now I have both of them loading without the error – Dave Haines May 29 '22 at 20:46
@JosephSible-ReinstateMonica Do you have any video resources to learn more on this? Recently had the same error and your solution helped fix it. – Sep 10 '22 at 22:08
@Brayan No I don't, and I explicitly recommend against videos to learn programming with. Read documentation instead. – Joseph Sible-Reinstate Monica Sep 10 '22 at 22:09
@JosephSible-ReinstateMonica Agreed. Where can i refer to this topic in the documentation? – Sep 11 '22 at 00:20
1

@Brayan https://reactjs.org/docs/lists-and-keys.html and https://reactjs.org/docs/reconciliation.html – Joseph Sible-Reinstate Monica Sep 11 '22 at 01:21

score 16 · Answer 2 · answered Aug 27 '22 at 16:58

I was using React fragments in my map() call in their simple syntax form, and was running into the same warnings with the code below:

<>
  <h3>{employee.department}</h3>
  <TableRow
    key={employee.id}
    cellValues={["Name", "Title"]} />

  <TableRow
    key={employee.id}
    cellValues={[employee.name, employee.title]}
  />
</>

Building off the accepted answer, I realized I needed the outermost element to have the ID. I learned of an alternate syntax for React fragments that allows one to put an ID on it. The resulting code below caused the warnings to go away:

<React.Fragment key={employee.id}>
  <h3>{employee.department}</h3>
  <TableRow
    cellValues={["Name", "Title"]} />

  <TableRow
    cellValues={[employee.name, employee.title]}
  />
</React.Fragment>

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

2 Answers2

Linked

Related