← All errors

TypeError: Cannot read properties of undefined

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

In one sentence: Your code tried to use something (like .map or .name) on a value that doesn't exist yet.

What it means

JavaScript is telling you: "you asked me for a property of something, but that something is undefined." The word in brackets, like 'map' or 'name', is the property it was trying to read. The thing before the dot is what's missing.

In AI-built React apps this almost always happens on the first render: the component runs before your data has loaded, so `products` is still undefined when it calls `products.map(...)`.

Common causes

• Data from an API or database hasn't arrived yet on the first render.
• The API returned a different shape than expected (e.g. `{ data: [...] }` instead of a plain array).
• A typo in a property name, or a prop that the parent component never passed in.
• useState was started with no default value: `useState()` instead of `useState([])`.

How to fix it

1. Find the line in the stack trace and look at the variable right before the property it names.
2. Give state a safe starting value: `useState([])` for lists, `useState(null)` for objects, then check for null before using it.
3. Use optional chaining for values that may be missing: `user?.profile?.name`.
4. console.log the API response once to confirm its real shape, and read the right key (e.g. `json.data`).

const [products, setProducts] = useState();
// ...
return products.map(p => <Card key={p.id} {...p} />);

const [products, setProducts] = useState<Product[]>([]);
// ...
if (!products.length) return <p>Loading…</p>;
return products.map(p => <Card key={p.id} {...p} />);

Prompt to paste into your AI tool

The app crashes with 'Cannot read properties of undefined (reading X)'. Initialize the state with a safe default, guard against the data not being loaded yet, and log the actual API response shape. Do not change unrelated code.

Related errors

• CORS error: blocked by CORS policy
• Hydration failed: server HTML didn't match the client (Next.js)
• Module not found: Can't resolve '...'
• Supabase: new row violates row-level security policy