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

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

Cause

This error occurs when you try to call .map() on a variable that is undefined instead of an array. Common scenarios:

• Data hasn't loaded yet (async operations)
• API returned unexpected structure
• Incorrect variable reference
• Missing default value

Solution

1. Add Optional Chaining (Quick Fix)

// Before (crashes)
items.map(item => <div>{item.name}</div>)

// After (safe)
items?.map(item => <div>{item.name}</div>)

2. Provide Default Value

// Using nullish coalescing
(items ?? []).map(item => <div>{item.name}</div>)

// Using logical OR
(items || []).map(item => <div>{item.name}</div>)

// In destructuring
const { items = [] } = data;

3. Add Conditional Rendering (React)

function MyComponent({ items }) {
  if (!items) {
    return <div>Loading...</div>;
  }
  
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

4. Initialize State Properly

// Before
const [items, setItems] = useState();

// After
const [items, setItems] = useState([]);

5. Check API Response Structure

// Verify the data path is correct
fetch('/api/data')
  .then(res => res.json())
  .then(data => {
    // Debug: check actual structure
    console.log(data);
    
    // Maybe it's data.items, not data
    setItems(data.items || []);
  });

Prevention

1. Always initialize arrays with empty [] in state
2. Use TypeScript to catch these at compile time:

   interface Props {
     items: Item[];  // Required array
     // or
     items?: Item[]; // Optional - forces you to handle undefined
   }
   

3. Validate API responses before using them
4. Use ESLint rules like @typescript-eslint/no-unsafe-call