useEffect throws "Cannot read properties of undefined" error in Next.js 14 project

[MohammedMohtaseb]

Question

I'm working on a Next.js 14 project using React 18, and trying to update component state based on fetched data inside a useEffect hook. However, I'm getting the following error:

javascript
Copy
Edit
TypeError: Cannot read properties of undefined (reading 'map')
The error points to the line where I try to map() over the data variable, which comes from an API call.

How to reproduce (optional)

What do you need help with?
I'd like to understand why this error is happening and how to safely use map() on data that might not be available immediately after component mount. I'm also open to suggestions on how to structure the data fetch to avoid this issue entirely.

Expected behavior (optional)

Additional information
🔧 Code snippet:
tsx
Copy
Edit
"use client";
import { useEffect, useState } from "react";

export default function Dashboard() {
const [items, setItems] = useState([]);
const [data, setData] = useState();

useEffect(() => {
// Simulate async fetch
setTimeout(() => {
setData([{ name: "Item 1" }, { name: "Item 2" }]);
}, 1000);
}, []);

useEffect(() => {
// This causes an error if data is undefined
setItems(data.map(item => item.name));
}, [data]);

return (

Dashboard

{items.map((name, index) => (

• {name}

))}

);
}

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

CLI Version

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

Information about Qlty configuration and environment (optional)

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

[MohammadMohtaseb]

Suggested Fix (Temporary Workaround):
Add a guard inside useEffect:

tsx
Copy
Edit
useEffect(() => {
if (data) {
setItems(data.map(item => item.name));
}
}, [data]);
Let me know if I’m missing something — open to better practices!