no-duplicate-key

This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.

Full Name in eslint-plugin-react-x

react-x/no-duplicate-key

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-duplicate-key

Features

🧪

Presets

Rule Details

React uses keys to identify elements in an array. If two elements have the same key, React will not be able to distinguish them. This can lead to issues with state and rendering.

Common Violations

Invalid

function MyComponent () {
  return [
    <li key="1">Item 1</li>
    <li key="1">Item 2</li>
    //  ^^^ The 'key' prop must be unique to its sibling elements.
  ]
};

function MyComponent() {
  return (
    <ul>
      <li key="1">Item 1</li>
      <li key="1">Item 2</li>
      {/* ^^^ The 'key' prop must be unique to its sibling elements. */}
    </ul>
  );
}

function MyComponent() {
  return (
    <ul>
      {["a", "b"].map((id) => <li key="1">{id}</li>)}
    </ul>
  );
  //                                     ^^^ The 'key' prop must be unique to its sibling elements.
}

Valid

function MyComponent () {
  return [
    <li key="1">Item 1</li>
    <li key="2">Item 2</li>
  ]
};

function MyComponent() {
  return (
    <ul>
      <li key="1">Item 1</li>
      <li key="2">Item 2</li>
    </ul>
  );
}

function MyComponent() {
  return (
    <ul>
      {["a", "b"].map((id) => <li key={id}>{id}</li>)}
    </ul>
  );
}

Rule Details

Common Violations

Invalid

Valid

Resources

Further Reading

See Also

On this page