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 strict strict-typescript strict-type-checked

Rule Details

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.

Common Violations

Invalid

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

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

Valid

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

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

Resources

• Rule Source
• Test Source

Further Reading

• React Docs: Why does React need keys?

See Also

• react-x/no-array-index-key
  Disallows using an item's index in the array as its key.
• react-x/no-duplicate-key
  Prevents duplicate key props on sibling elements when rendering lists.
• react-x/no-implicit-key
  Prevents implicitly passing the key prop to components.