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 (
&lt;div&gt;
  &lt;h1&gt;User List&lt;/h1&gt;
  &lt;ul&gt;
    {users.map(user =&gt; (
      &lt;li key={user.id}&gt;{user.name} - {user.email}&lt;/li&gt;
    ))}
  &lt;/ul&gt;
&lt;/div&gt;
); } ReactDOM.render(<UserList />, document.getElementById('root'));

Comments

Leave a Reply

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