Hackforge Academy

Explanation

Import React hooks. We use useState to store users data and useEffect to call the API when the component loads. These are essential for handling API data in React

Code:

import React, { useEffect, useState }
from "react";

Explanation

Slide 2: Create a functional component and initialize state. The users state will store the API response after fetching data.

Code:

function UsersList() {
  const [users, setUsers] = useState([]);

Explanation

Slide 3: Fetch users from API using useEffect. The API call runs once when the component loads and updates state with fetched data 🌐.

Code:

useEffect(() => {
  fetch("https://")
    .then((response) => response.json())
    .then((data) => setUsers(data))
    .catch((error) => console.error(error));
}, []);

Explanation

Slide 4: Display users dynamically using map(). Each user is rendered as a list item from the stored state data 📋.

Code:

return (
  <div>
    <h2>User List</h2>
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          {user.name} - {user.email}
        </li>
      ))}
    </ul>
  </div>
);

Explanation

Slide 5: Export the component so it can be reused anywhere in your React application. This completes the users list API integration example ✅.

Code:

export default UsersList;