Add more detail to missing-key warning

[japgolly]

I have a component in which I must be using an array and not setting keys because I get this warning:

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

The problem is that render methods aren't always simple and sometimes it's quite hard to find out where the problematic array is.

It would be awesome it the warning could be enhanced to provide some more information about the problematic dom. Something like:

Warning: Each child in an array or iterator should have a unique "key" prop.
Check the render method of `Blah` when rendering: <ol><li>One</li><li>Two</li></ol>
See https://fb.me/react-warning-keys for more information.

or even

Warning: Each child in an array or iterator should have a unique "key" prop.
Check the render method of `Blah`.
The head element renders to: <li>One</li>
See https://fb.me/react-warning-keys for more information.

[japgolly]

The same goes for the flattenChildren(...): Encountered two children with the same key warning. Showing a subset of the DOM would be very, very helpful.

[troydemonbreun]

Could you post a plunker or gist with the source example that contains the DOM to which you would want the above warnings to result?

[bpedersen]

I believe that a recreation of the issue would be in the following fiddle: https://jsfiddle.net/c8bxbjwv/.

You can see that both "hello" and "world" render, but the world is the invalid element as it doesn't have a key, but the error doesn't display that. I have created an attempt at fixing this with Pull Request #6317.

Please let me know your thoughts

[troydemonbreun]

So, given that fiddle, what would the warning text be?

[bpedersen]

Currently I have a basic warning,

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'Hello'. The head element renders to: <div>world<div/> See https://fb.me/react-warning-keys for more information.

We need to expand on it to cover edge cases, it currently isn't descriptive enough. For example if we have multiple divs with world as text it doesn't distinguish which one is the culprit.

[troydemonbreun]

Cool, that would be helpful info.

[gaearon]

This was fixed in https://github.com/facebook/react/pull/6799—now we have an exact stack trace.