9

Consider the following JSX with an intentionally added duplicate key:

<table>
    <tbody>
        <tr key="row1">
            <td>row1_col1</td>
        </tr>
        <tr key="row1">  <--- same key here
            <td>row2_col1</td>
        </tr>
    </tbody>
</table>

As expected this leads to

index.js:1 Warning: Encountered two children with the same key, row1. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Now imagine I get this error and don't know the key values and want to check them in the Devtools.

Inspect element in the normal Chrome Devtools won't show the key:

enter image description here

And the React Devtools also don't show the key / won't show the <table> and <tr> at all:

enter image description here

What am I doing wrong? How to view the keys in the Devtools?

stefan.at.kotlin
  • 15,347
  • 38
  • 147
  • 270
  • I can see the key inr eact dev tools, whatever if it unique or duplicate – Nisharg Shah Jan 03 '21 at 17:43
  • The docs say specifically: "Keys serve as a hint to React but they don’t get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:" https://reactjs.org/docs/lists-and-keys.html#keys-must-only-be-unique-among-siblings – jmargolisvt Jan 03 '21 at 17:46
  • @NishargShah Can you post a screenshot of it? Are you using the official React Devtools? Where exactly can you see the key? – stefan.at.kotlin Jan 03 '21 at 18:09
  • @jmargolisvt I understand that they are no `props` (maybe using row1 as ID is misleading here) and I also don't want them to be passed "into" ``. I just want to know how to see which element has which key for debugging purposes. – stefan.at.kotlin Jan 03 '21 at 18:11

1 Answers1

17

Solved by changing settings. In React devtools: Components tab -> settings symbol -> components -> remove or disable the filter type equals host (e.g. <div>)

enter image description here

stefan.at.kotlin
  • 15,347
  • 38
  • 147
  • 270