Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Only the outermost mapped element needs a key — don't repeat it on nested children
When rendering a list, React only needs the `key` prop on the outermost element actually returned from the `.map()`/iteration callback. Adding `key` again to a nested child inside that element is redundant — it has no effect there.
Bad example
| 1 | {options.map((option) => ( |
| 2 | <DropdownMenu.Item key={option}> |
| 3 | <button key={option}>{option}</button> |
| 4 | </DropdownMenu.Item> |
| 5 | ))} |
Explanation (EN)
React's reconciler only reads `key` on the direct children of the array being rendered — DropdownMenu.Item here. The key on the nested button does nothing.
Objašnjenje (HR)
React-ov rekoncilijator čita `key` samo na izravnoj djeci polja koje se renderira — ovdje DropdownMenu.Item. Key na ugniježđenom button elementu ne radi ništa.
Good example
| 1 | {options.map((option) => ( |
| 2 | <DropdownMenu.Item key={option}> |
| 3 | <button>{option}</button> |
| 4 | </DropdownMenu.Item> |
| 5 | ))} |
Explanation (EN)
The key lives only on the element actually being iterated over; the child needs none.
Objašnjenje (HR)
Key postoji samo na elementu koji se stvarno iterira; dijete ga ne treba.