Encountered two children with the same key (React)

# 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.

Here is an example of how the error occurs.

Copied!
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 is that we are using the name property on each object for the key prop but the name property is not unique across all objects.

# Using the index as the key

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.

Copied!
const App = () => {
  const people = [
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
    {id: 3, name: 'Alice'},
  ];

  // 👇️ now using the 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.

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

# Using a unique identifier as the key

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

Copied!
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.

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.

When adding a key prop to a React Fragment, make sure to use the verbose syntax.

Note that you shouldn't try to access the key property, otherwise, the warning Key is not a prop. Trying to access it will result in undefined is raised.