Lists & keys.
Render arrays. Get keys right.

function FruitList() {
const fruits = ['apple', 'banana', 'cherry'];

return (

{fruits.map((fruit) => (
{fruit}
))}

);
}

// React renders:
// 

// 
apple
// 
banana
// 
cherry
// 
//
// Note: 'key' is not rendered to the DOM.
// It's a special React-only prop used for
// reconciliation. You can't access it as a prop
// inside the child component either.

// ─────────────────────────────────────────

// Array of objects — the real-world case
function UserList() {
const users = [
{ id: 1, name: 'Alice', email: 'alice@x.com' },
{ id: 2, name: 'Bob', email: 'bob@x.com' },
{ id: 3, name: 'Priya', email: 'priya@x.com' },
];

return (

{users.map((user) => (

{user.name} — {user.email}

))}

);
}

// key={user.id} — the stable, unique identifier.
// Without it: React warning "Each child in a list
// should have a unique 'key' prop" and potential
// reconciliation bugs when the list changes.

// Imagine a list of items with a checkbox each.
// Initial state:
// [ ] Item A
// [ ] Item B
// [x] Item C ← user checked this one

// The array of items:
const items = [
{ id: 'a', text: 'Item A', checked: false },
{ id: 'b', text: 'Item B', checked: false },
{ id: 'c', text: 'Item C', checked: true },
];

// ─────────────────────────────────────────
// ❌ BROKEN — using index as key
{items.map((item, index) => (

))}

// User deletes "Item A". The new array:
const items = [
{ id: 'b', text: 'Item B', checked: false }, // index 0
{ id: 'c', text: 'Item C', checked: true }, // index 1
];

// React sees:
// - index 0: was "Item A", now "Item B" → reuse the SAME DOM element
// - index 1: was "Item B", now "Item C" → reuse the SAME DOM element
// - index 2: removed
//
// The DOM element that held Item B's checkbox now shows
// "Item C" — but the checked state is preserved on the
// WRONG item! The user sees "Item C" unchecked.

// ─────────────────────────────────────────
// ✅ CORRECT — using stable id as key
{items.map((item) => (

))}

// React sees:
// - key 'b': Item B (unchanged, keep DOM)
// - key 'c': Item C (unchanged, keep DOM)
// - key 'a': removed (delete DOM)
//
// Each item keeps its own DOM node, its own checked state,
// its own anything. Deleting Item A doesn't affect the others.
// The user's checkmark stays on Item C.

// ✅ SAFE — static list, never changes
function Menu() {
const links = ['Home', 'About', 'Contact'];

return (

);
}
// The array is hardcoded. Items never reorder, insert, or delete.
// Index keys are fine here — they'll never be reassigned.

// ─────────────────────────────────────────

// ❌ BROKEN — dynamic list with inputs
function TodoList() {
const [todos, setTodos] = useState([
{ id: 1, text: 'Buy milk' },
{ id: 2, text: 'Walk dog' },
{ id: 3, text: 'Read book' },
]);

function removeFirst() {
setTodos(todos.slice(1));
}

return (

{todos.map((todo, i) => (
 {/* ❌ index as key */}
"checkbox" />
{todo.text}

))}

);
}
// User checks "Buy milk" (index 0), then clicks remove.
// "Walk dog" moves from index 1 to index 0.
// React reuses the DOM element at index 0 — the one that
// was checked. Now "Walk dog" appears checked!
// The checkmark "moved" from the deleted item to the next.
// Fix: key={todo.id} — each item keeps its own DOM.

// ─────────────────────────────────────────

// ❌ BROKEN — items reorder
// A sortable list with index keys: sorting reorders the
// underlying DOM nodes. React uses indices to match, so
// input values move to the wrong rows. Fix: stable keys.

// ─────────────────────────────────────────

// ✅ FIX — always use stable IDs
{todos.map((todo) => (

"checkbox" />
{todo.text}

))}

// 1. BEST — database ID from your backend
const users = await res.json();
// [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
{users.map((u) => )}

// ─────────────────────────────────────────

// 2. GOOD — stable unique field (email, slug, uuid)
const users = [{ email: 'alice@x.com', name: 'Alice' }];
{users.map((u) => )}
// Only safe if email is truly unique in the data.
// If emails can repeat, use a different field.

// ─────────────────────────────────────────

// 3. GOOD — generate on creation, not on render
const [items, setItems] = useState([]);

function addItem(text) {
setItems([...items, {
id: crypto.randomUUID(), // ← generated ONCE, when added
text,
}]);
}

// ❌ BROKEN — generating in the render
{items.map((item) => (
randomUUID()} {...item} />
))}
// New UUID every render → every item is "new" → React
// re-creates every DOM node on every render. Slower,
// loses state, animations replay. Never do this.

// ─────────────────────────────────────────

// 4. LAST RESORT — index (only for static lists)
// Acceptable for a hardcoded array. Never for dynamic.

// ─────────────────────────────────────────

// 5. Combine fields when no single unique field exists
const events = [
{ date: '2026-10-26', type: 'login' },
{ date: '2026-10-26', type: 'logout' },
{ date: '2026-10-27', type: 'login' },
];
{events.map((e) => (
``${e.date}-${e.type}`} {...e} />
))}
// Safe if (date, type) is unique. Verify with data.

// Filter — keep only active items
{items
.filter((item) => item.active)
.map((item) => )}

// Sort — by name, then map
{[...items]
.sort((a, b) => a.name.localeCompare(b.name))
.map((item) => )}
// Note the [...items] spread — .sort() mutates the array
// it's called on! Spreading first creates a copy so the
// original state isn't modified. Without the spread,
// you'd be sorting state in place — a React bug.

// Filter + sort + map — the full chain
{items
.filter((item) => item.active)
.sort((a, b) => b.score - a.score)
.map((item) => )}

// ─────────────────────────────────────────

// ❌ BROKEN — sort mutates the state array
items.sort((a, b) => a.name - b.name);
{items.map((item) => )}
// .sort() mutates the array in place. React doesn't
// detect the change (same array reference) → no re-render.
// Even worse: the state is now sorted in the wrong order,
// and every subsequent render sees the mutated array.
// Fix: [...items].sort(...) or items.slice().sort(...)

// ─────────────────────────────────────────

// ❌ BROKEN — .sort() with no comparator
items.sort();
// Converts everything to strings and sorts alphabetically.
// [1, 2, 10, 20] → [1, 10, 2, 20].
// Always pass a comparator for numbers:
// items.sort((a, b) => a - b)

// ─────────────────────────────────────────

// Empty state — when the filtered list is empty
{filtered.length === 0 ? (
No items match your filters.
) : (

{filtered.map((item) => )}

)}
// Always handle the empty case. "Nothing renders"
// looks like a bug — show a message instead.