no-missing-key

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-missing-key

Full Name in eslint-plugin-react-x

react-x/no-missing-key

Presets

x recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Description

Disallows 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 props on sibling elements when rendering lists.
• no-implicit-key
  Prevents implicitly passing the 'key' prop to components.
• no-array-index-key
  Warns when an array index is used as a key prop.