logoESLint React
Rules

no-duplicate-key

Prevents duplicate 'key' props on sibling elements when rendering lists.

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

🧪

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.

Examples

Returning sibling elements with duplicate keys in an array

When multiple elements in an array use the same key, React cannot distinguish them correctly.

// 🔴 Problem: Duplicate keys on sibling elements in an array
function MyComponent () {
  return [
    <li key="1">Item 1</li>
    <li key="1">Item 2</li>
  ]
};
// 🟢 Recommended: Assign a unique key to each sibling element
function MyComponent () {
  return [
    <li key="1">Item 1</li>
    <li key="2">Item 2</li>
  ]
};

Writing sibling elements with duplicate keys in JSX

Sibling elements written directly in JSX with the same key will also cause React identification issues.

// 🔴 Problem: Duplicate keys on sibling elements in JSX
function MyComponent() {
  return (
    <ul>
      <li key="1">Item 1</li>
      <li key="1">Item 2</li>
    </ul>
  );
}
// 🟢 Recommended: Ensure keys are unique among sibling elements
function MyComponent() {
  return (
    <ul>
      <li key="1">Item 1</li>
      <li key="2">Item 2</li>
    </ul>
  );
}

Using a fixed key value in a map loop

Using a fixed string as a key in loops like map causes every iteration to produce elements with the same key.

// 🔴 Problem: All elements in a map loop use the same key
function MyComponent() {
  return (
    <ul>
      {["a", "b"].map((id) => <li key="1">{id}</li>)}
    </ul>
  );
}
// 🟢 Recommended: Use a unique identifier from the data as the key
function MyComponent() {
  return (
    <ul>
      {["a", "b"].map((id) => <li key={id}>{id}</li>)}
    </ul>
  );
}

Combining multiple lists into one array

Keys must be unique only among siblings within the same array — React explicitly allows the same keys in JSX nodes from different arrays rendered side by side. But when multiple lists are merged into a single array, keys that were unique within each list can collide among the new siblings.

// 🔴 Problem: Merging two lists can produce duplicate keys if their ids overlap
function App({ activeItems, archivedItems }) {
  const items = [...activeItems, ...archivedItems];
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}
// 🟢 Recommended: Prefix the key with the source list so keys stay unique in the merged array
function App({ activeItems, archivedItems }) {
  const items = [
    ...activeItems.map((item) => ({ ...item, key: `active-${item.id}` })),
    ...archivedItems.map((item) => ({ ...item, key: `archived-${item.id}` })),
  ];
  return (
    <ul>
      {items.map((item) => (
        <li key={item.key}>{item.name}</li>
      ))}
    </ul>
  );
}

Resources

Further Reading

See Also

no-direct-mutation-state

Disallows direct mutation of 'this.state'.

no-forward-ref

Replaces usage of 'forwardRef' with passing 'ref' as a prop.

On this page

Rule DetailsExamplesReturning sibling elements with duplicate keys in an arrayWriting sibling elements with duplicate keys in JSXUsing a fixed key value in a map loopCombining multiple lists into one arrayResourcesFurther ReadingSee Also