7

I have a react component, which generate many keys for a time, I am not sure which one is not unique. The error is as below. Any easy way to help debugging? thanks!

react.js:19500 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of MyGrid. See https ://fb.me/ react-warning-keys for more information.

Todayboy
  • 175
  • 1
  • 2
  • 8

2 Answers2

9

This is a warning that you have NOT assigned a key, rather than it isn't actually unique, the next line of the message should tell you exactly what is the offending element - see an example below in div (created by CardsComponent)

warning.js:36 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `CardsComponent`. See fb.me/react-warning-keys for more information. in div (created by CardsComponent)

If you want to debug further the test is done in ReactElementValidator.validateExplicitKey which simply does a check for if the element key being non null, no checking of uniqueness amongst sibling keys...

function validateExplicitKey(element, parentType) {
  if (!element._store || element._store.validated || element.key != null) {
    return;
  }
  // if it gets here it has failed and you will be warned

The interesting part here being element.key != null as the others pass as virtue of already having been validated

alechill
  • 4,274
  • 18
  • 23
  • 7
    alechill, how to use the validateExplicitKey function to debug? How to call it? Looks like you trimmed the ending of the function – obeliksz Jul 27 '17 at 09:18
2

Click to expand the error in the console to reveal the stack trace. Follow the calls up to the one before createElementWithValidation and it should show you the culprit line number.

Log the keys you're using there. If there's a ton, put them in an array and [].filter((e, i, a) => a.indexOf(e) !== i)

dpren
  • 1,225
  • 12
  • 18