search

reagent-project / reagent

A minimalistic ClojureScript interface to React.js
http://reagent-project.github.io/
MIT License
4.75k stars 414 forks source link

Tracking down unique key prop violations #33

Closed ptaoussanis closed 10 years ago

ptaoussanis commented 10 years ago

Hi Dan,

Was just wondering if you had any suggestions on how best to track down the cause of messages like "Each child in an array should have a unique "key" prop. Check the render method of :li"

When I've got hundreds of :li tags, it's sometimes quite painful trying to isolate the particular tag(s) where there's a key conflict or missing key.

As I understand it (?), the error messages when using JSX include the component's displayName to help in cases like this. Have played around a little with the Chrome React developer tools, but that doesn't seem (?) to help with this much. Any ideas?

Thanks a lot, cheers! :-)

holmsand commented 10 years ago

Yep, been there as well…

It would be very useful if React included the entire path of the component in its error messages, and not just the name.

What I have done when trying to find the offending component is to change the name of some of the suspects. Reagent sets displayName to the entire name of the tag (for built-in components), so if you use e.g :li.suspect1, :li.suspect2, etc these full names should show up in the error messages (and, as you say, in the Chrome developer tools).

Note also that you only need to look for seqs. They are converted into javascript arrays (hence React's error message), and their top-level components are the ones that should have a key.

ptaoussanis commented 10 years ago

It would be very useful if React included the entire path of the component in its error messages, and not just the name.

That would be very helpful. Will see about suggesting it on the group.

Note also that you only need to look for seqs. They are converted into javascript arrays (hence React's error message), and their top-level components are the ones that should have a key.

What I have done when trying to find the offending component is to change the name of some of the suspects.

Ahh, hadn't realised that would show in the displayName, thanks!