Fetch Data from an API

This example fetches data from a public API and displays it.

jsxCopy codeimport React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUsers = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      setUsers(data);
      setLoading(false);
    };

    fetchUsers();
  }, []);

  if (loading) return <div>Loading...</div>;

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

ReactDOM.render(<UserList />, document.getElementById('root'));

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *