TypeError: Cannot read properties of undefined (reading 'map')
You called .map() on something that is undefined — almost always an array that has not loaded yet, or one that lives at a different path in the data than you think.
What it means
The message says exactly what happened: the thing to the left of .map is undefined. It is the single most common React crash, because components render before their data arrives. Note it is not saying the value isn't an array — that would be "map is not a function". It is saying there is no value at all.
Common causes
1. State that starts undefined
useState() with no argument is undefined on the first render, before your fetch finishes.
Breaks
const [posts, setPosts] = useState();
// ...
return posts.map(p => <Post key={p.id} {...p} />);Works
const [posts, setPosts] = useState([]);
// ...
return posts.map(p => <Post key={p.id} {...p} />);2. The array is nested deeper in the response
APIs wrap lists: the array is at data.results or data.items, not data itself.
Breaks
const data = await res.json();
setUsers(data.users); // API actually sends { results: [...] }Works
const data = await res.json();
console.log(data); // check the real shape once
setUsers(data.results ?? []);3. An arrow function with braces but no return
With { } an arrow function needs an explicit return, otherwise it returns undefined.
Breaks
const getIds = (rows) => {
rows.filter(r => r.active);
};
getIds(rows).map(r => r.id);Works
const getIds = (rows) => rows.filter(r => r.active);
getIds(rows).map(r => r.id);4. A prop that the parent did not pass
A missing prop is undefined, and the child maps over it.
Breaks
function List({ items }) {
return items.map(i => <li key={i}>{i}</li>);
}
<List />Works
function List({ items = [] }) {
return items.map(i => <li key={i}>{i}</li>);
}How to find it in your own code
console.log the value one line before the .map. If it is undefined on the first log and an array on the second, it is a loading problem — initialise to [] or guard with `if (!items) return null`. If it is never an array, log the whole response and fix the path. Optional chaining (items?.map) hides the crash but renders nothing, so only use it when "nothing" is genuinely correct.
Still not sure why yours breaks?
Paste it into the visualizer and watch it run line by line, with every variable at every step. Free, and it runs in your browser.