Index.js:1 Warning: Each child in a list should have a unique "key" prop

React
1

Hi,

I am in the pagination section of the React Course. As shown in the video, I also added the All Genres category to the listGroup. As this does not have the _id property, it is giving the following warning.

image

But this was not mentioned in the group. Could someone please confirm if this is expected?

2

In Mosh’s final solution there is an id (emtpy string):

const genres = [{ _id: "", name: "All Genres" }, ...getGenres()];

I’m not sure in which video that was introduced, though.

1 Like
3 
should be if (genre && genre._id) {
......
}
1 Like
4

Thank you guys, as @SAM mentioned it was covered in a later video.

5

Hey. Actually even if you add that empty id when creating the All Genres extra object item, it will not eliminate the warning msg because when we filter the movies by a particular genre the filtered movies will all have the same genre id and that’s why react complains about it. Those ids should actually be the same because we’re filtering to be so.

The right solution for this, I don’t know, but just to eliminate the warning msg I added i to the key={item[valProp]} + i and mod the map like : items.map((item, i)…

I guess that’s a good way to create a bug, because if react needs to use that key and check with the real key in the DB it can be a problem …

===

note: finally I’ve found what I did wrong.
Instead of defining _id = "" I did id="" so it didn’t work.

Mosh’s solution is in : 16 - Sorting - Raising the Sort Event movie , aprox. 03:10s

1 Like