facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
223.76k stars 45.56k forks source link

Bug: The Warning 'Each child in a list should have a unique "key" prop.' Should Provide the Duplicate Key #29116

Open jwalkerinterpres opened 2 weeks ago

jwalkerinterpres commented 2 weeks ago

React version: 8.3.0

Steps To Reproduce

  1. Repeat content with the same key
  2. Get a warning (in your browser dev tools console):

    Each child in a list should have a unique "key" prop.

Link to code example:

No link needed, it's a single line of code:

<ul>{ [1,2,3].map(num => <li key="sameKey">{num}</li> }</ul>

The current behavior

image

The expected behavior

The warning essentially says "You've got duplicate values". But, React knows exactly what key it saw duplicated, right?

That key (eg. "sameKey" in my example), would be useful for debugging purposes, so why not report it?

Each child in a list should have a unique "key" prop, but the key "sameKey" was seen at least twice.

Shraghav commented 1 day ago

Here try to pass the sameKey as num as each num is different. Now you won't get any warnings