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

Features

🔍

Presets

core
recommended
recommended-typescript
recommended-type-checked

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 }>;