Skip to main content

React fix guide

Fix Duplicate IDs on React

IDs must be unique in the DOM.

Check your live page

Canonical issue page: Duplicate IDs

What this issue means

Fix

Rename duplicates; generate stable unique ids for lists rendered in loops.

How to fix on React

Use useId (React 18+) for generated ids in loops.

How to fix

Ensure ids are unique per document; generate stable unique ids in lists.

Fix templates so duplicated components do not reuse hard-coded ids.

Code example

{items.map((item) => (
  <div key={item.id} id={`section-${item.id}`}>...</div>
))}

Related: 4.1.1 Parsing (historically); best practice for robustness.

Other platforms

TestAccessibility · Programmatic fix page · localhost:3001