Find Duplicated Key in a complicated React component

Question

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.

Answer 1

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