ReactJS: Is there a way to see the values used for the key property required for lists

Question

I'm getting the common error: Warning: Each child in an array or iterator should have a unique "key" prop.

In general, finding the offending code is easy, but this time it is not. What I would like to know is what are the key values for the items being displayed.

(Q) Is there a way for me to see what each key property's value in the DOM that is rendered?

When I inspect the HTML generated lists that react has rendered, I don't see the key property on the DOM elements (nor would I expect to see it), but that is what I'm asking to see. Is there a flag I can set to ask React to add that key property value to the DOM so I can see it?

This would let me see where I'm missing a key, or have two keys with the same value (this is the problem I think I have). See Find Duplicated Key in a complicated React component

At this point, I'm doing the methodical approach of rendering one item at a time to isolate which item has the problem so I can zero in and find the offending code.

Searching for solutions

When searching for solutions there are several good write ups on how this works and why keys are needed, and they are shown below.

• Similar question (OKs same question as mine, but no answer) - Cant find react error which child is missing key prop

• Excellent question about how keys work and a great answer. See Understanding unique keys for array children in React.js

• The ReactJS docs on using Keys and mis-using them. See https://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys.

• An npm library that helps solve this problem. See https://www.npmjs.com/package/react-key-index

• How do you track down duplicate keys - Find Duplicated Key in a complicated React component

Answer 1

Here is some explanation why Key is important and how to provide it to an array of children in React:

There are three List component in the example below. If you open it in the Chrome DevTools and click on the "Randomize sort" you will realize that the children of the lists are changing (they blink) but in the second example some more of the li elements are changing, the reason is React is removing and re-creating the li tag.

The efficient examples are the first and third List component because React knows instead of removing these group of elements it can to re-order them which is way faster!

I would NOT recommend the third (JSON.stringify) example, better always rely on a unique property from the data structure to avoid extra work.

const items = Array(10).fill(null).map((_, idx) => ({ id: String(idx) + Math.floor(Math.random() * 9999), title: 'Item '+(idx+1) }));

function List({ children, items, keyProp, indexType }) {
  return (
    <div style={{ borderBottom: '1px solid black', padding: '1em' }}>
      <h2>{children}</h2>
      <ul>
        {items.map((data, idx) => {
          const key = indexType === 'dataStructure'
            ? data[keyProp]
            : indexType === 'jsonStringify'
              ? JSON.stringify(data)
              : idx;
          return (
            <li key={key}>{data.title}, key: {key}</li>
          )
        })}
      </ul>
    </div>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { items };
    this.handleRandomize = this.handleRandomize.bind(this);
  }
  handleRandomize() {
    this.setState({ items: items.slice().sort(() => Math.round(Math.random() * 2) - 1) });
  }
  render() {
    return (
      <div style={{ background: 'red', marginBottom: '2em' }}>
        <button onClick={this.handleRandomize}>Randomize sort</button>
        <List items={this.state.items} indexType='dataStructure' keyProp='id'>
          <p>List renderd with unique "id" from data structure</p>
        </List>
        <List items={this.state.items} indexType='arrayIndex'>
          <p>List rendered with index of the loop</p>
        </List>
        <List items={this.state.items} indexType='jsonStringify'>
          <p>List rendered with JSON.stringify()</p>
        </List>
      </div> 
    )
  }
}

ReactDOM.render(<App />, document.querySelector('#root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>