This content originally appeared on DEV Community and was authored by Yash Smith
Hello,
I’m fetching data from an API and trying to display it on the frontend, but the page is not rendering properly. The console shows an error:
TypeError: Cannot read properties of undefined (reading 'map')
Here’s my React component:
import { useEffect, useState } from "react";
const UsersList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://api.example.com/users")
.then(res => res.json())
.then(data => setUsers(data))
.catch(error => console.error("Error fetching users:", error));
}, []);
return (
<div>
<h2>User List</h2>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
};
export default UsersList;
Troubleshooting Attempts:
Checked API response, and it's returning data.
Console logs show users as undefined initially.
Tried adding users && users.map(...) but the issue persists.
Any ideas on how to resolve this? Thanks in advance!
Would you like more variations or different types of errors?
This content originally appeared on DEV Community and was authored by Yash Smith
Yash Smith | Sciencx (2025-03-12T09:41:27+00:00) Page Not Rendering After Fetching Data from API. Retrieved from https://www.scien.cx/2025/03/12/page-not-rendering-after-fetching-data-from-api/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.