Breaking News: Grepper is joining You.com. Read the official announcement!

reate a react js file that can fetch user data from api

isuro answered on January 12, 2024 Popularity 2/10 Helpfulness 1/10

answer reate a react js file that can fetch user data from api

reate a react js file that can fetch user data from api

Comment

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

const UserList = () => {
  const [userData, setUserData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/users"
        );
        if (!response.ok) {
          throw new Error("Failed to fetch data");
        }
        const data = await response.json();
        setUserData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <h2>Loading...</h2>;
  }

  if (error) {
    return <h2>Error: {error}</h2>;
  }

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

export default UserList;

//App.js
import React from "react";
import UserList from "./UserList";

const App = () => {
  return (
    <div>
      <UserList />
    </div>
  );
};

export default App;

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: api fetch file javascript user-data

Link to this answer
Share Copy Link

Contributed on Jan 12 2024

isuro

0 Answers Avg Quality 2/10

reate a react js file that can fetch user data from api

Contents

More Related Answers

reate a react js file that can fetch user data from api

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.