← All errors · Lovable

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

Exact error

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

What it means

Code called .map() on a value that is undefined, usually data that hasn't loaded yet or a response with a different shape than expected. Very common in AI-generated React apps.

Likely causes

• Rendering before async data arrives.
• API/Supabase returned null or an object instead of an array.
• Wrong property path (data.items vs data).

How to fix it

1. Default to an empty array and guard rendering:

   const [items, setItems] = useState([]);
   ...
   {(items ?? []).map(item => <Row key={item.id} {...item} />)}

2. With Supabase, check for an error and null data:

   const { data, error } = await supabase.from('items').select('*');
   if (error) console.error(error);
   setItems(data ?? []);

3. console.log the response once to confirm its actual shape.

Related errors

• Supabase select returns an empty array (no error)
• Lovable app shows a blank white page after deploying elsewhere