How to display dynamic list data into table in ReactJS

Create a dynamic array list and display the list data in tabular form in ReactJs. In this tutorial, let’s create reactJS application that will display list data into a table over the webpage. Following are the steps to create this example.

Setup the environment
Create table
Create an array (it can be any dynamic array from an API as well)
Show the dynamic data in a table

Setup the Environment

Create a React project with npx create-react-app app-name . Read this article to know more about creating a React project. (We will be using TailwindCSS and DaisyUI for the styling. To know more, Read this as well)
Open the project folder and create a folder inside src, named components.

Create a functional component

import React from 'react';

const ListTable = () => {
    return (
        <div>

        </div>
    );
};

export default ListTable;

We will be creating our table inside the <div>...<div> in this component and write the functions and JavaScript methods inside the component function (before return).

Import this functional component into the App.js file

import ListTable from "./components/ListTable";

import React, { useState, useEffect } from "react";
import ListTable from "./components/ListTable";


const App = () => {

  return (
    <div >
      <ListTable />
    </div>
  );
}

export default App

Whatever we write inside the returned <div> in this App component, will be visible to the browser. Any kind of HTML tag or even any other component can be written here.

Create table

First, create a table with some static data. Then we will render the table rows dynamically.

Create a table inside the ListTable component.

<div className='w-1/2 my-16 mx-auto'>
            <div class="overflow-x-auto">
                <table class="table w-full">
                    {/* <!-- head --> */}
                    <thead className='text-center'>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody className='text-center'>
                        {/* <!-- row 1 --> */}
                        <tr>
                            <th>1</th>
                            <td>Cy Ganderton</td>
                        </tr>
                        {/* <!-- row 2 --> */}
                        <tr>
                            <th>2</th>
                            <td>Hart Hagerty</td>
                        </tr>
                        {/* <!-- row 3 --> */}
                        <tr>
                            <th>3</th>
                            <td>Brice Swyre</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

Here, the table has two columns with the name of id and name. And each one has some static data.

Create an Array

Create an array inside the function of the component.

const listTable = [
        { id: 1, name: 'John' },
        { id: 2, name: 'Dalton' },
        { id: 3, name: 'Nedved' },
        { id: 4, name: 'Meisa' },
        { id: 5, name: 'Abidal' },
        { id: 6, name: 'Terry' },
        { id: 7, name: 'Yaya' },
        { id: 8, name: 'Carlos' },
        { id: 9, name: 'Johansson' },
    ]

Here is an array, that has nine objects in it with an id and name. This is the list that we have created for example. But it can be some data from an API as well. Read this article to know about rendering data from an API.

Show the Data in Table

Go to the ListTable component and remove every row from the tbody except one.

<div className='w-1/2 my-16 mx-auto'>
            <div class="overflow-x-auto">
                <table class="table w-full">
                    {/* <!-- head --> */}
                    <thead className='text-center'>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody className='text-center'>
                        {/* <!-- row 1 --> */}
                        <tr>
                            <th>1</th>
                            <td>Cy Ganderton</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

map through the array inside the tbody with the help of JSX expression and return the <tr> with the data from the array.

 <tbody className='text-center'>
                        {/* <!-- row 1 --> */}
                        {
                            listTable.map(data =>
                                <tr>
                                    <th>{data.id}</th>
                                    <td>{data.name}</td>
                                </tr>
                            )
                        }
</tbody>

Here, we have run a map into the array and returned <tr> . And replacing the static data with the data from the objects of the array.

import React from 'react';

const ListTable = () => {
    const listTable = [
        { id: 1, name: 'John' },
        { id: 2, name: 'Dalton' },
        { id: 3, name: 'Nedved' },
        { id: 4, name: 'Meisa' },
        { id: 5, name: 'Abidal' },
        { id: 6, name: 'Terry' },
        { id: 7, name: 'Yaya' },
        { id: 8, name: 'Carlos' },
        { id: 9, name: 'Johansson' },
    ]
    return (
        <div className='w-1/2 my-16 mx-auto'>
            <div class="overflow-x-auto">
                <table class="table w-full">
                    {/* <!-- head --> */}
                    <thead className='text-center'>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody className='text-center'>
                        {/* <!-- row 1 --> */}
                        {
                            listTable.map(data =>
                                <tr>
                                    <th>{data.id}</th>
                                    <td>{data.name}</td>
                                </tr>
                            )
                        }
                    </tbody>
                </table>
            </div>
        </div>
    );
};

export default ListTable;

As we can see in the preview, after running the map to the array, it has returned each <tr> with every object that the array had. And with the JSX expression, the dynamic data also can be shown in each <tr>.

This is how we can show a list of data in a table in ReactJS.