Prevent usage of Array index in keys error in React

It is a common ESLint warning in React. ESLint is a popular tool that helps developers catch and fix common programming mistakes.

While it may not be a critical error, it can impact performance and overall development experience.

Why this error occurs?

When working with JS map() method, the error “Prevent usage of Array index in keys” can occur if the index of each element is used as the key. This error message indicates that using the array index as the key can lead to unintended issues and should be avoided.

Let’s assume we have an array of objects called “data” in which we are storing some important “text”.

const data = [
  { text: "Hi My name is Praveen and I am 19 years old" },
  { text: "Hi My name is Aman and I am 18 years old" },
  { text: "Hi My name is Navin and I am 22 years old" },
  { text: "Hi My name is Ajeet and I am 19 years old" }
];

And you want to display the “text” of every single object in your React app. To do that you will use JavaScript’s map() method. As we know that JS allows us to pass 2 parameters to the map() method. The first parameter represents each individual element in the array, while the second parameter represents the position or index of that element within the array. Then we will use the text of each object in the array and pass it into a <p> for display.

{data.map((content, index) => (
// ⛔️ Prevent usage of Array index in keys.
          <div key={index} >
            <p>{content.text}</p>
          </div>
        ))}

When we pass the key to the outermost element of the JSX, an error message may appear stating “Prevent usage of Array index in keys”.

Using the index of an array as the key may seem like a convenient solution, especially when the items in the array don’t have unique identifiers. However, it can lead to issues when manipulating the list or making changes to the order of the elements.

Here are a few reasons why using the array index as the key is discouraged:

1. Unstable keys: If we use the index as the key for elements in React, and the index changes, React may mistakenly treat different items as the same, resulting in incorrect rendering and potential loss of data.
2. Poor performance: When elements are added or removed from the middle of the list, using array index as keys can cause React to re-render the entire list instead of just updating the affected elements.

How to fix this error ?

To prevent the “Array index in keys” error and its associated issues, it is recommended to use unique and stable identifiers as keys for list items. If the data in the array doesn’t have unique identifiers, you can consider generating or assigning unique keys to each element before rendering the list.

This could be done by using a unique property of each item or by generating unique IDs using libraries like uuid.

Since we don’t have a unique identifier available, we can use the “text” property as a unique key in this case. The key needs to be unique, but it doesn’t necessarily have to be a number. Therefore, we can utilize the “text” property as the key for each element. It is generally recommended to use a special unique key instead.

// {data.map((content, index) => (
          <div key={content.text} >
//            <p>{content.text}</p>
//          </div>
//        ))}

This approach will definitely resolve the error you were facing.

ALSO SEE – Each child in a list should have a unique “key” prop error in React.