no-missing-key

react-x/no-missing-key

@eslint-react/no-missing-key

// Problem: When a key is missing, React uses the array index as the default key, which can lead to state mismatch or performance issues
interface MyComponentProps {
  items: { id: number; name: string }[];
}

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

// Recommended: Provide a stable and unique key for each item in the list to help React correctly track element identity
interface MyComponentProps {
  items: { id: number; name: string }[];
}

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

// Problem: Fragment shorthand (<>) does not support keys
function Blog({ posts }) {
  return posts.map((post) => (
    <>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </>
  ));
}

// Recommended: Use explicit Fragment with a key
import { Fragment } from "react";

function Blog({ posts }) {
  return posts.map((post) => (
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  ));
}