[Simple Way]-How to display array data into tables in Reactjs

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 – Stack Overflow
• 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

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”.

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

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;

In this example, we have an array of products and we are going to create the dynamic header of the table using JSON data.

I have an array of products with four objects in it. I want to render them in an HTML table in react and also bind table header dynamically. we are using map method, to render as table row. See the below example.

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;

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;

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:

• What does props mean in react?
• Components in React Js?
• State in React Js

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.

The post React Js- Fetch data from API using hooks appeared first on Software Development | Programming Tutorials.