Fix - Encountered two children with the same key (React)

avatar

Borislav Hadzhiev

Sun Apr 17 20223 min read

banner

Photo by Carlos

Fix - Encountered two children with the same key (React) #

The React error "Encountered two children with the same key" occurs when two or more of the elements we return from the map() method have the same key prop. To solve the error, provide a unique value for the key prop on each element or use the index parameter.

react encountered two children with the same key

Here is an example of how the error occurs.

App.js
const App = () => { // 👇️ name property is not a unique identifier const people = [ {id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Alice'}, ]; /** * ⛔️ Encountered two children with the same key, `Alice`. * 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. */ return ( <div> {people.map(person => { return ( <div key={person.name}> <h2>{person.id}</h2> <h2>{person.name}</h2> </div> ); })} </div> ); }; export default App;

The issue in the code snippet is that we are using the name on each object for the key prop but the name property is not unique across all objects.

One way to solve the error is to use the index which is the second parameter that is passed to the function the map() method takes.

App.js
const App = () => { const people = [ {id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Alice'}, ]; // 👇️ now using index for key return ( <div> {people.map((person, index) => { return ( <div key={index}> <h2>{person.id}</h2> <h2>{person.name}</h2> </div> ); })} </div> ); }; export default App;

The function we passed to the Array.map method gets called with each element in the array and the index of the current element that's being processed.

The index is guaranteed to be unique, however it's not a best practice to use it for the key prop because it's not stable and can change between renders.

A better solution is to use a value that uniquely identifies each element in the array.

In the example, we can use the id property on the object because each id is guaranteed to be unique.

App.js
const App = () => { const people = [ {id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Alice'}, ]; // ✅ now using the id for the key prop return ( <div> {people.map(person => { return ( <div key={person.id}> <h2>{person.id}</h2> <h2>{person.name}</h2> </div> ); })} </div> ); }; export default App;

Using the id for the key prop is much better because we are guaranteed that the object with id of 1 will always have a name property equal to Alice.

React uses the value we pass to the key prop for performance reasons - to make sure it only updates the list elements that change between renders.

When each element in an array has a unique key, it's much easier for React to determine which list elements changed.

You could use the index for the key prop, however this could cause React to do more work behind the scenes than it would with a stable value like a unique id.

Having said that, there's a very good chance you won't notice any difference between using the index and a unique identifier unless you are rendering arrays with many thousands of elements.

Use the search field on my Home Page to filter through my more than 1,000 articles.