"Each child should have a unique key."
The fix, and why index keys are wrong.

import { useState } from 'react';

interface User {
id: string;
name: string;
email: string;
}

// ─── BAD: no key, or index as key ────────────
function BadList({ users }: { users: User[] }) {
return (

{users.map((user, index) => (
 {/* ⚠️ index key */}
{user.name} — {user.email}

))}

);
}

// ─── GOOD: stable ID as key ──────────────────
function GoodList({ users }: { users: User[] }) {
return (

{users.map(user => (
 {/* ✅ stable id */}
{user.name} — {user.email}

))}

);
}

// ─── Why index breaks — a live demo ──────────
function IndexKeyBug() {
const [users, setUsers] = useState([
{ id: 'a', name: 'Alice', email: 'a@x.com' },
{ id: 'b', name: 'Bob', email: 'b@x.com' },
{ id: 'c', name: 'Carol', email: 'c@x.com' }
]);

function remove(id: string) {
setUsers(u => u.filter(x => x.id !== id));
}

return (

With ID key (correct)

{users.map(u => (

{u.name}
 remove(u.id)}>×

))}


{/* If you switch to key={index}:
- Delete Alice (index 0)
- Bob moves to index 0
- React sees "the element at index 0 changed"
- Any state inside that row (input, checkbox, focus)
leaks from Alice's row to Bob's row
- THIS is the bug index keys cause */}

);
}

console.log(BadList, GoodList, IndexKeyBug);

import { useState } from 'react';

interface Row {
id: string;
label: string;
}

// ─── The bug, demonstrated ──────────────────
function IndexKeyBug() {
const [rows, setRows] = useState([
{ id: 'a', label: 'Row A' },
{ id: 'b', label: 'Row B' },
{ id: 'c', label: 'Row C' }
]);

function remove(id: string) {
setRows(r => r.filter(x => x.id !== id));
}

return (

Try this: type "AAA" in Row A's input, then delete Row A.

{/* ✅ CORRECT — key={row.id} */}
Correct: key={{row.id}}
{rows.map(row => (
 remove(row.id)}
/>
))}

{/* ❌ BUGGY — key={{index}} */}
Buggy: key={{index}}
{rows.map((row, index) => (
 remove(row.id)}
/>
))}

);
}

function RowComponent({ label, onDelete }: { label: string; onDelete: () => void }) {
// Local state that doesn't belong to the parent
const [text, setText] = useState('');

return (
'flex', gap: 8, margin: '4px 0' }}>
80 }}>{label}
 setText(e.target.value)}
placeholder="type here..."
/>
×

);
}

// ─── What happens with index keys ─────────────
//
// Initial state:
// Row A (index 0): text = 'AAA' ← user typed this
// Row B (index 1): text = ''
// Row C (index 2): text = ''
//
// User deletes Row A.
// New array:
// Row B (index 0)
// Row C (index 1)
//
// React sees:
// "Index 0: was 'Row A', now 'Row B' — same element, update the label"
// "Index 1: was 'Row B', now 'Row C' — same element, update the label"
// "Index 2: was 'Row C', now gone — unmount"
//
// Result:
// Row B's input now contains "AAA" (leaked from Row A)
// Row C's input is empty (was empty)
//
// The state leaked from one item to another because
// the key (index) stayed the same — React thinks
// it's the same component.
//
// ─────────────────────────────────────────────
//
// With key={row.id}, React sees:
// "key 'a' is gone — unmount"
// "key 'b' moved — same element, keep its state"
// "key 'c' moved — same element, keep its state"
//
// Result:
// Row B's input is empty (correct)
// Row C's input is empty (correct)
// No state leaks. Correct.

console.log(IndexKeyBug, RowComponent);

import { useState } from 'react';

// ─── Form rows with generated IDs ────────────
interface FormRow {
id: string;
value: string;
}

function DynamicForm() {
const [rows, setRows] = useState([
{ id: crypto.randomUUID(), value: '' }
]);

function addRow() {
setRows(r => [
...r,
{ id: crypto.randomUUID(), value: '' } // ✅ new ID
]);
}

function removeRow(id: string) {
setRows(r => r.filter(x => x.id !== id));
}

function updateRow(id: string, value: string) {
setRows(r => r.map(x => x.id === id ? { ...x, value } : x));
}

return (

{rows.map(row => (
'flex', gap: 8 }}>
 updateRow(row.id, e.target.value)}
/>
 removeRow(row.id)}>Remove

))}
+ Add row

);
}

// ─── BAD: generate IDs during render ─────────
function BadIds({ items }: { items: string[] }) {
return (

{items.map(item => (
{/* ❌ New ID on every render — React remounts every item */}
crypto.randomUUID()}>{item}
))}

);
}

// ─── BAD: Math.random() as fallback ──────────
function BadRandom({ items }: { items: { name: string }[] }) {
return (

{items.map(item => (
{/* ❌ Same problem — new key each render */}
Math.random()}>{item.name}
))}

);
}

// ─── When to use what ────────────────────────
//
// ✅ Data has an ID:
// key={item.id}
//
// ✅ Local form rows / optimistic UI:
// Generate crypto.randomUUID() when item is created
//
// ✅ Backend IDs available:
// key={item.uuid || item.id || item.slug}
//
// ❌ Never:
// key={index} — breaks on reorder/delete
// key={Math.random()} — remounts on every render
// key={crypto.randomUUID()} inside render — same as above

console.log(DynamicForm, BadIds, BadRandom);