Display JSON data to a table in React JS

Share the post

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…

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

Display JSON data to a table in React JS
Display JSON data to a table in React JS

1 thought on “Display JSON data to a table in React JS”

Leave a Comment