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 an array index is used as a key prop.

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 Array index as '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>
  );
}

What it does

Examples

Failing

Passing

Implementation

Further Reading

See Also

On this page