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-react/eslint-plugin

@eslint-react/no-duplicate-key

Full Name in eslint-plugin-react-x

react-x/no-duplicate-key

Features

🧪

Description

Prevents duplicate key props on sibling elements when rendering lists.

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

Failing

import React from 'react';

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.
  ]
};

import React from "react";

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>
  );
}

import React from "react";

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

Passing

import React from 'react';

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

import React from "react";

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

import React from "react";

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

Description

Examples

Failing

Passing

Implementation

Further Reading

See Also

On this page