react icon indicating copy to clipboard operation
react copied to clipboard

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

Open jwalkerinterpres opened this issue 1 year ago • 2 comments

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.

jwalkerinterpres avatar May 16 '24 20:05 jwalkerinterpres

    { [1,2,3].map(num =>
  • {num}
  • }

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

Shraghav avatar May 31 '24 17:05 Shraghav

This warning ,giving no help to know WHERE the duplicate keys are happening, is very frustrating. Please improve this!

jeghers avatar Sep 07 '24 07:09 jeghers