Hello All, In this tutorial we will learn How to display JSON data to a table in React JS. We will use fetch API to get data in React with REST API. Also, after fetching the data we need to display it in table format. So, In this React JS example, We will learn in a simpler way to show data in table format.
In this React JS example, We will use simple HTML & CSS to display JSON data in table format. Also, there are other methods to display JSON data in a tabular format but we will make use of the <table> element.
So, let’s Start…
Table of Contents
How to display JSON data to a table in React JS
- Step 1: Create a new React Project
- Step 2: HTTP Request & Response
- Step 3: Update UI
- Step 4: Update CSS
- Step 5: Run React JS Application
- Step 6: Output
Step 1: Create a new React Project
To demonstrate the working of fetch() API, We need to create a new React Project. Use the below command to create a new project in React JS
npx create-react-app myapp
Now, go to our project path
cd myapp
We will open this project in Visual Studio Code editor using the below command.
code .
Step 2: HTTP Request & Response
We are going to fetch the data from the JSON placeholder site which gives us a demo API. If you want to call your own API then that is also ok. Just you need to make some changes according to your response.
Now, we will import useState to initiate the state of the component & useEffect which is similar to the componentDidMount() method.
The fetch() function is as shown below
const fetchData = () => {
fetch(URL)
.then((res) =>
res.json())
.then((response) => {
console.log(response);
getData(response);
})
}
here, URL is nothing but
const URL = 'https://jsonplaceholder.typicode.com/posts';
Step 3: Update UI
Now, It’s time to show the data after fetching it successfully from the server. So, we will use the <table> element to display JSON data stored in constant data.
<tbody>
<tr>
<th>User Id</th>
<th>Id</th>
<th>Title</th>
<th>Description</th>
</tr>
{data.map((item, i) => (
<tr key={i}>
<td>{item.userId}</td>
<td>{item.id}</td>
<td>{item.title}</td>
<td>{item.body}</td>
</tr>
))}
</tbody>
Full Source Code
import React, { useState, useEffect } from 'react';
import '../tabledata.css';
function TableData() {
const [data, getData] = useState([])
const URL = 'https://jsonplaceholder.typicode.com/posts';
useEffect(() => {
fetchData()
}, [])
const fetchData = () => {
fetch(URL)
.then((res) =>
res.json())
.then((response) => {
console.log(response);
getData(response);
})
}
return (
<>
<h1>How to display JSON data to table in React JS</h1>
<tbody>
<tr>
<th>User Id</th>
<th>Id</th>
<th>Title</th>
<th>Description</th>
</tr>
{data.map((item, i) => (
<tr key={i}>
<td>{item.userId}</td>
<td>{item.id}</td>
<td>{item.title}</td>
<td>{item.body}</td>
</tr>
))}
</tbody>
</>
);
}
export default TableData;
Step 4: Update CSS
Now, We need to add some borders to the table to show data in a proper format.
Add new file tabledata.css in the root folder.
td, th {
border: 1px solid #ddd;
padding: 8px;
}
Step 5: Run React JS Application
Now, We have to run our application in the browser to see the output. Use the below command to run the react application.
npm run start
Step 6: Output
1 thought on “Display JSON data to a table in React JS”