key List Keys
Last updated: 2026-11-02
key List Keys
A key is the identity of an element inside a rendered list. React relies on it to recognize which items changed and which ones should move or be removed; getting it wrong leads to misplaced state and crossed input values. A key must be unique and stable within the same list. Choosing a key is a small decision with a large effect on how a list behaves.
| Group | Rendering & State |
|---|---|
| Kind | Pattern |
| Since | Earliest React versions |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
{items.map((item) => (
<li key={item.id}>{item.text}</li> // ✅ a stable, unique id
))}
// ❌ key={index}: state gets misplaced when the list grows, shrinks or is reordered⚙️ Parameters
| key | A stable, unique identifier for the element; React uses it while diffing lists to decide which element to reuse, move or destroy. |
|---|
Returns：No return value — a coding convention and mental model.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Each row of the list is a "task name + input box". Type text in a few rows and click "insert at the top": the new task appears at the top while the text you typed stays with its original task — a stable key lets React recognize every item.💡 Key Points
⚠️ Warning Do not use the index as key when a list grows, shrinks, is reordered or filtered; the internal state of the items then shifts along with their positions.
💡 Tip Prefer an id from the backend or another stable business identifier; reserve the index for purely static lists that have no stable id at all.
ℹ️ Info The key is not passed into the component: props.key is undefined inside a child, so pass the data you need as a regular prop.
🏷️ More Rendering & State
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why can't I use the array index as a key?
A The index follows the position instead of the data: after an insert, delete or reorder, React can hand item A's state to item B, which crossed inputs and broken checkboxes.
Q Can keys repeat?
A They must be unique inside the same list; duplicates cause rendering errors and warnings. Different lists are independent, so each one may start numbering from 1.
Q How do I fix the missing key warning in the console?
A It means the elements returned by map have no key. Give every item a stable, unique identifier (a business id is best) and make sure it sits on the outermost element of the list item.
