logoESLint React
Rules

no-array-index-key

Full Name in eslint-plugin-react-x

react-x/no-array-index-key

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-array-index-key

Features

🔍

Presets

  • core
  • recommended
  • recommended-typescript
  • recommended-type-checked

What it does

Warns when using an item's index in the array as its key.

The order of items in a list rendering can change over time if an item is inserted, deleted, or the array is reordered. Indexes as keys often lead to subtle and confusing errors.

Examples

Failing

import React from "react";
 
interface MyComponentProps {
  items: { id: string; name: string }[];
}
 
function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map((item, index) => (
        //              ^^^^^
        //              - Do not use item index in the array as its key.
        <li key={index}>{item.name}</li>
      ))}
    </ul>
  );
}

Passing

import React from "react";
 
interface MyComponentProps {
  items: { id: string; name: string }[];
}
 
function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map((item) => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

Implementation

Further Reading


See Also

  • no-missing-key
    Prevents missing key on items in list rendering.
  • no-duplicate-key
    Prevents duplicate key on elements in the same array or a list of children.
  • no-implicit-key
    Prevents key from not being explicitly specified (e.g. spreading key from objects).

On this page