React fetch data from API and display in a table

We will make use of jsonplaceholder for our APIs.

Project setup

Create a react app using the following command:

1npx create-react-app react-fetch-data-table

Add the following styles in index.css:

index.css

1body {
2  margin-top: 20px;
3  display: flex;
4  justify-content: center;
5}

Calling the API

We will use the browser fetch API inside the useEffect hook to call the API to fetch data.

App.js

1import { useEffect, useState } from "react"
2
3function App() {
4  const [users, setUsers] = useState([])
5  const [loading, setLoading] = useState(false)
6  useEffect(() => {
7    setLoading(true)
8    fetch("https://jsonplaceholder.typicode.com/users")
9      .then(response => response.json())
10      .then(json => setUsers(json))
11      .finally(() => {
12        setLoading(false)
13      })
14  }, [])
15
16  return <div className="App"></div>
17}
18
19export default App

Here we are calling the API and setting the response to the users state. We also have a state named loading to display a loading text when the data is being fetched.

Displaying the data

In the code below, we are looping the users' array using map and displaying the user details in a table

App.js

1import { useEffect, useState } from "react"
2
3function App() {
4  const [users, setUsers] = useState([])
5  const [loading, setLoading] = useState(false)
6  useEffect(() => {
7    setLoading(true)
8    fetch("https://jsonplaceholder.typicode.com/users")
9      .then(response => response.json())
10      .then(json => setUsers(json))
11      .finally(() => {
12        setLoading(false)
13      })
14  }, [])
15
16  return (
17    <div className="App">
18      {loading ? (
19        <div>Loading...</div>
20      ) : (
21        <>
22          <h1>Users</h1>
23          <table border={1}>
24            <tr>
25              <th>Name</th>
26              <th>Email</th>
27              <th>Phone</th>
28            </tr>
29            {users.map(user => (
30              <tr key={user.id}>
31                <td>{user.name}</td>
32                <td>{user.email}</td>
33                <td>{user.phone}</td>
34              </tr>
35            ))}
36          </table>
37        </>
38      )}
39    </div>
40  )
41}
42
43export default App

Now if you run the app, you will see the data being displayed in a table:

Source code and Demo

You can view the complete source code here and a demo here.

Do follow me on twitter where I post developer insights more often!

React fetch data from API and display in a table

Table of Contents

Project setup

Calling the API

Displaying the data

Source code and Demo

Related Articles

Leave a Comment

Tools