no-missing-key

Rule category

Correctness.

What it does

Prevents missing key 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' for element when rendering list. */}
      ))}
    </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 }>;