no-missing-key

Rule category

Correctness.

What it does

Prevents missing key prop on items in list rendering.

Why is this bad?

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 ExampleProps {
  items: { id: number; name: string }[];
}
 
function Example({ items }: ExampleProps) {
  return (
    <ul>
      {items.map((todo) => (
        <Todo {...todo} />
      // ^^^^^^^^^^^^^^^
      // - Missing key, Each child in a list should have a unique 'key' prop.
      ))}
    </ul>
  );
}
 
declare const Todo: React.ComponentType<{ id: number; name: string }>;

Passing

import React from "react";
 
interface ExampleProps {
  items: { id: number; name: string }[];
}
 
function Example({ items }: ExampleProps) {
  return (
    <ul>
      {items.map((todo) => (
        <Todo key={todo.id} {...todo} />
      ))}
    </ul>
  );
}
 
declare const Todo: React.ComponentType<{ id: number; name: string }>;