TypeError: Cannot read properties of undefined (reading 'map')

  • React
  • JavaScript

What it means

Your code used something before it existed. Usually a list from an API or database is still loading, came back empty, or has a different shape than the code expects, so there is nothing to call .map on.

Why it happens

  • The page renders before the data has loaded, so the value is still undefined.
  • The API returns { data: [...] } but the code expects the list itself (or the other way round).
  • The request failed, and the error case was never handled.

How to fix it

  1. Start lists as an empty array, and show a loading state until data arrives.
  2. Log the real response once and match the code to its actual shape.
  3. Handle the error case: show a message instead of rendering missing data.
  4. Avoid silencing it with ?. everywhere: find out why the value is missing.

Let your AI find the cause

Paste this into Claude Code, Cursor, Lovable or whichever AI built your app. It looks first and changes nothing until you have read the answer.

My app crashes with 'Cannot read properties of undefined'. Without changing anything yet, find the line in the stack trace, tell me where that value comes from, what shape it has when it arrives, and in which cases (loading, empty, error) it can be undefined.