React Error: Missing "key" prop for element in iterator

# React Error: Missing "key" prop for element in iterator

The React ESlint error 'Missing "key" prop for element in iterator' occurs when you don't set the key prop when iterating over an array or set the prop on a nested element.

To solve the error, set the key prop on the outermost element to a unique value.

Copied!
eslint: Missing "key" prop for element in iterator (react/jsx-key)

Here is an example of how the error is raised.

Copied!
import {useState} from 'react';

function App() {
  const [users, setUsers] = useState([
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bobby Hadz'},
    {id: 3, name: 'Carl'},
  ]);

  return (
    <div>
      {users.map(user => (
        // 👇️ Forgot to set the key prop
        // ⛔️ eslint: Missing "key" prop for element in iterator (react/jsx-key)
        // ⛔️ Warning: Each child in a list should have a unique "key" prop.
        <div>
          <h2>Name: {user.name}</h2>
        </div>
      ))}
    </div>
  );
}

export default App;

We used the Array.map() method to iterate over the array of objects state.

The error is caused because we didn't set the key prop on the div element to a unique value.

# Setting the key prop to a unique identifier

Here is a code sample in which the issue is resolved.

Copied!
import {useState} from 'react';

function App() {
  const [users, setUsers] = useState([
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bobby Hadz'},
    {id: 3, name: 'Carl'},
  ]);

  return (
    <div>
      {users.map(user => (
        // ✅ set `key` prop to a unique value
        <div key={user.id}>
          <h2>Name: {user.name}</h2>
        </div>
      ))}
    </div>
  );
}

export default App;

We set the key prop to the value of the user.id property of each object.

The id property is used to uniquely identify each object in the example.

If you need to add a key prop to a React Fragment, check out the following article.

# Using the index of the current iteration for the key prop

If you don't have a unique identifier for each object, use the index of the current iteration instead.

Copied!
import {useState} from 'react';

function App() {
  const [users, setUsers] = useState([
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bobby Hadz'},
    {id: 3, name: 'Carl'},
  ]);

  return (
    <div>
      {users.map((user, index) => (
        // Using the index for the `key` prop
        <div key={index}>
          <h2>Name: {user.name}</h2>
        </div>
      ))}
    </div>
  );
}

export default App;

The callback function we passed to Array.map() takes the index of the current iteration as the second argument.

Since we know that the index of the current iteration is unique, it can also be used when setting the key prop.

# The purpose of the key prop in React

In React.js, the key prop is used internally for performance reasons.

It helps the library only re-render the array elements that have changed.

If the key prop isn't unique, you'd get the Encountered two children with the same key warning.

This makes your React.js application a bit slower.

Similarly, if two or more elements in the array have the same key prop, React can't distinguish between them.

When one of the elements is updated, React has to re-render all elements that have the same key which may also cause performance issues.

Removing elements from the array, causes the array indices to shift which confuses React and causes it to re-render more elements than necessary.

This can be avoided if you have a stable, unique identifier property on each object.

Using the index is the best alternative when you don't have a unique id property.

It is unlikely to cause performance issues unless you work with large arrays containing thousands of elements that you have to interact with (e.g. by removing elements from the middle of the array).

# Make sure to set the key prop on the outermost element

The following code sample also raises the warning because the key prop is set on a nested element.

For example, the following code sample causes the error.

Copied!
import {useState} from 'react';

function App() {
  const [users, setUsers] = useState([
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bobby Hadz'},
    {id: 3, name: 'Carl'},
  ]);

  return (
    <div>
      {users.map((user, index) => (
        // ⛔️ eslint: Missing "key" prop for element in iterator (react/jsx-key)
        // ⛔️ Warning: Each child in a list should have a unique "key" prop.
        <div>
          <h2 key={index}>Name: {user.name}</h2>
        </div>
      ))}
    </div>
  );
}

export default App;

Notice that we set the key prop on the h2 element and not on the div.

React looks for the key prop on the outermost element (the div).

Setting the key prop on a nested element is equivalent to not setting it at all.

To resolve the issue, make sure to set the key prop on the outermost element.

Copied!
import {useState} from 'react';

function App() {
  const [users, setUsers] = useState([
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bobby Hadz'},
    {id: 3, name: 'Carl'},
  ]);

  return (
    <div>
      {users.map((user, index) => (
        // ✅ key prop is set correctly
        <div key={index}>
          <h2>Name: {user.name}</h2>
        </div>
      ))}
    </div>
  );
}

export default App;

This section of the React.js docs go in-depth on why React needs keys.

I've also written articles on:

• How to Update an Array of Objects state in React
• How to sort an array of objects in React.

If you need to loop through an object, click on the link and follow the instructions.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• How to add a key prop to a React Fragment
• Nothing was returned from render Error in React [Solved]
• Loop through an Array of Objects in React
• How to merge two Arrays in React.js