Fix 'Cannot read properties of undefined (reading map)' in React

You fetch a list from an API and render it with .map(). It crashes instantly — because on the first render, before the fetch resolves, your state is still undefined. This is the most common runtime error in React apps.

Why This Happens

React renders before your async data arrives. If you initialize state as undefined (or it is a nested property that does not exist yet), calling .map() on it throws.

Fix 1: Initialize State as an Empty Array

// ❌ undefined on first render
const [users, setUsers] = useState();

// ✅ Always an array — .map() is always safe
const [users, setUsers] = useState([]);

Fix 2: Optional Chaining + Nullish Fallback

When the data is nested or comes from props you do not control, guard the access:

{(data?.users ?? []).map((u) => (
  <li key={u.id}>{u.name}</li>
))}

Fix 3: Render a Loading / Empty State

The most user-friendly fix — handle the three real states explicitly:

if (loading) return <Spinner />;
if (!users?.length) return <p>No users found.</p>;

return (
  <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>
);