no-missing-key

Full Name in eslint-plugin-react-x

react-x/no-missing-key

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-missing-key

Presets

• x
• recommended
• recommended-typescript
• recommended-type-checked

Description

Disallow missing key on items in list rendering.

React needs keys to identify items in the list. If you don’t specify a key, React will use the array index as a key, which often leads to subtle and confusing bugs.

Examples

Failing

import React from "react";

interface MyComponentProps {
  items: { id: number; name: string }[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map((todo) => <Todo {...todo} />)}
    </ul>
  );
}

Passing

import React from "react";

interface MyComponentProps {
  items: { id: number; name: string }[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map((todo) => <Todo key={todo.id} {...todo} />)}
    </ul>
  );
}

Implementation

• Rule source
• Test source

Further Reading

• React Docs: Why does React need keys?

See Also

• 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).
• no-array-index-key
  Warns when an array index is used as a key prop.