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.

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

no-missing-key

What it does

Examples

Failing

Passing

Implementation

Further Reading

On this page