eslint-react
HomeHomeDocumentationDocumentationRulesRules
GitHubGitHub (opens in a new tab)
  • Overview

  • jsx/no-array-index-key
  • jsx/no-comment-textnodes
  • jsx/no-complicated-conditional-rendering
  • jsx/no-duplicate-key
  • jsx/no-leaked-conditional-rendering
  • jsx/no-missing-key
  • jsx/no-spreading-key
  • jsx/no-useless-fragment
  • jsx/prefer-shorthand-boolean
  • jsx/prefer-shorthand-fragment
  • react-hooks/ensure-custom-hooks-using-other-hooks
  • react-hooks/ensure-use-callback-has-non-empty-deps
  • react-hooks/ensure-use-memo-has-non-empty-deps
  • react/no-children-count
  • react/no-children-for-each
  • react/no-children-in-void-dom-elements
  • react/no-children-map
  • react/no-children-only
  • react/no-children-prop
  • react/no-children-to-array
  • react/no-class-component
  • react/no-clone-element
  • react/no-component-will-mount
  • react/no-component-will-receive-props
  • react/no-component-will-update
  • react/no-constructed-context-value
  • react/no-create-ref
  • react/no-dangerously-set-innerhtml
  • react/no-dangerously-set-innerhtml-with-children
  • react/no-find-dom-node
  • react/no-missing-button-type
  • react/no-missing-component-display-name
  • react/no-missing-iframe-sandbox
  • react/no-namespace
  • react/no-redundant-should-component-update
  • react/no-render-return-value
  • react/no-script-url
  • react/no-set-state-in-component-did-mount
  • react/no-set-state-in-component-did-update
  • react/no-set-state-in-component-will-update
  • react/no-string-refs
  • react/no-unsafe-component-will-mount
  • react/no-unsafe-component-will-receive-props
  • react/no-unsafe-component-will-update
  • react/no-unsafe-iframe-sandbox
  • react/no-unsafe-target-blank
  • react/no-unstable-default-props
  • react/no-unstable-nested-components
  • react/prefer-destructuring-assignment
  • naming-convention/component-name
  • naming-convention/filename
  • naming-convention/filename-extension
  • debug/class-component
  • debug/function-component
  • debug/react-hooks

On This Page

  • Rule category
  • What it does
  • Examples
  • ❌ Incorrect
  • ✅ Correct
  • Further Reading
Question? Give us feedback → (opens in a new tab)Edit this page
Rules
jsx/no-missing-key

jsx/no-missing-key

Rule category

Correctness.

What it does

Prevents missing key prop on items in list rendering.

Examples

❌ Incorrect

const TodoList = ({ todos }) => (
  <ul>
    {todos.map((todo) => <Todo {...todo} />)}
  </ul>
);

✅ Correct

const TodoList = ({ todos }) => (
  <ul>
    {todos.map((todo) => <Todo {...todo} key={todo.id} />)}
  </ul>
);

Further Reading

react.dev why-does-react-need-keys (opens in a new tab)

jsx/no-leaked-conditional-renderingjsx/no-spreading-key

MIT 2023 © ESLint x React.