In our last article, we discussed crud operation in react js using rest API. In this post, We will discuss How to display data to table in React Js.

In this post we will discuses the following point

  • Converting array data into a table in react 
  • How to display an array of objects in a table in React Js
  • Display array data through map in react HTML table

Step- 1

Let’s Create react js app using the below command

npx create-react-app crud-app

Step 2- Create components

Create a “components” folder inside the src folder in our react js project. and add two file inside that folder with the name Employeelist.js and  “Productlist.js”.

project

Step 3-Write code

How to display array data in React js?

In react, a component represents a part of the user interface, you can say that our application has five components, one for the header, one for site NAV, one for the main content, one for the footer, and finally, one component to contain every other component.

I have an array with four objects in it. I want to render them in an HTML table in react. we are using map method, to render them as a table.let’s understand with an example.

Employeelist.js

The component defines an array named employeeslist containing objects, each representing an employee. Each employee object has properties like Id, EmployeeName, EmployeeSalary, and Adress. if employeeslist exists and has at least one element. If it does, it renders a table containing the employee information. Otherwise, it shows a message saying "No Record Found".

Finally, the component is exported as Employeelist, making it available for use in other parts of the application. Below code defines a React component that displays a list of employees in a table format, handling the case where no records are found.

import React from 'react';

class Employeelist extends React.Component {
    render() {
var employeeslist = [
            {
"Id": 1,
"EmployeeName": "Jimmy",
"EmployeeSalary": "$3200",
"Adress": "Amsterdam, Netherlands"
            },
            {
"Id": 3,
"EmployeeName": "Mark",
"EmployeeSalary": "$2000",
"Adress": "France, Paris"
            },
            {
"Id": 1005,
"EmployeeName": "Johny",
"EmployeeSalary": "$2500",
"Adress": "Usa,New York"
            },
            {
"Id": 1007,
"EmployeeName": "Alex",
"EmployeeSalary": "$3000",
"Adress": "Usa,New York"
            }
        ];
        debugger;
if (employeeslist && employeeslist.length > 0) {
return (<div>
                <h2>Employees List</h2>
                <table className="table" >
                    <thead>
                        <tr>
                            <th>Employee Id</th>
                            <th>Name</th>
                            <th>Salary</th>
                            <th>Address</th>
                        </tr>
                    </thead>
                    <tbody>
                        {employeeslist.map(emp => (
                            <tr key={emp.Id}>
                                <td>{emp.Id}</td>
                                <td>{emp.EmployeeName}</td>
                                <td>{emp.EmployeeSalary}</td>
                                <td>{emp.Adress}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>)
        }
else {
return (<div>No Record Found</div>)
        }
    }
}
export default Employeelist;

employeelist

In this example, we have an array of products, and we aim to create a dynamic table header using JSON data. The array contains four objects representing products. Our goal is to render these products in an HTML table using React and dynamically bind the table header. We achieve this by utilizing the map method to render each product as a table row. See the example below.

Productlist.js

import React, { Component } from 'react';

class Productlist extends Component {
    render() {
var tblheading = ['ProductName', 'Unit', 'Price'];
var tblbody =
            [
                ['Northwoods Cranberry Sauce', '12 - 8 oz jars', "$25"],
                ['Ikura', '2 kg box', '$21'],
                ['Queso Cabrales', '12 - 12 oz jars', '$30'],
                ['Konbu', '2 kg box', '$15']
            ];
return (
            <div>
                <h2>Product List</h2>
                <table className="table" >
                    <thead>
                        <tr>
                            {tblheading.map(head => <th>{head}</th>)}
                        </tr>
                    </thead>
                    <tbody>
                        {tblbody.map(row => <TableRow row={row} />)}
                    </tbody>
                </table>
            </div>
        );
    }
}

const TableRow = ({ row }) => {
return (
        <>
            <tr>
                {row.map(val => <td>{val}</td>)}
            </tr>
        </>
    )
}

export default Productlist;


The Productlist component is exported as the default export, making it available for use in other parts of the application.Overall, this code show you how to dynamically generate a table header and populate a table body with data in a React component.


Step 4-Import  component

App.js

Import Employeelist and Productlist component in App root component .

The containing component or you can say the master component which contains all components is known as the root component of the application and is generally named as app component in the application. Each of the five nested components represents only a part of the user interface.

import logo from './logo.svg';
import './App.css';
import Employeelist from "./components/Employeelist";
import Productlist from "./components/Productlist";

function App() {
return (
    <div className="container">
      <Employeelist/>
      <Productlist/>
    </div>
  );
}

export default App;

productlist

In the very first introductory post, we had a brief overview of Reacts component-based architecture. 

I’m assuming that you are aware of React Js framework and creating React Js project. if needed then please read the following articles:

📰 Read more article

Yet, all the components together create the entire application, as we know that Components are reusable so that we can render a component anywhere in our application. we can use the same component with different properties to display different details and UI. For example, the side nav component of our application can be the left side nav as well as the right side nav. As we know, components can also contain other components.

For example, Our App component contains multiple components i.e header, footer, side nav, etc. how does a component translate to code in our application?

A component code is usually placed in a JavaScript file, for example, the App component is placed in App.js

You can also have component files with.JSX extension, but for this series, we stick to the simple. JS extension. We will, however, take a closer look at .JSX in one of the upcoming posts. All right, so a component is the code inside a .js file, but what does that code look like?That depends on the type of component.

Read Similar Articles