no-duplicate-key

Rule category

Correctness.

What it does

Prevents duplicate key props on elements in the same array or a list of children.

Why is this bad?

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 Example () {
  return [
    <li key="1">Item 1</li>
    <li key="1">Item 2</li>
    //  ^^^^^^^
    //  - Duplicate key '1' found.
  ]
};

Passing

import React from 'react';
 
function Example () {
  return [
    <li key="1">Item 1</li>
    <li key="2">Item 2</li>
  ]
};