How to build an HTML table using ReactJS from arrays ?

To build an HTML table using ReactJS from arrays we can use the array methods to iterate to iterate the elements and create the table rows

Prerequisites:

• NPM & Node.js
• React JS
• JavaScript Array.map()
• HTML Table

Approach:

To build an HTML table from an array of elements using ReactJS, we can use the array map method. The map() method iterates through each element of the array and will convert it into a table row. First, we will create a table tag then first, we will iterate through the heading/column names of the table and convert them into a table header using the <th> tag. Then we will iterate through the table data and convert them into each row as a table body using the <td> tag.

Steps to Create React Application:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

Example: This example implements an HTML table in React JS from an array using the Array map method.

Javascript

// Filename - App.js

import React, { Component } from "react";

class App extends Component {
    render() {
        let heading = ["Name", "City", "Course"];
        let body = [
            ["Kapil", "Jaipur", "MCA"],
            ["Aakash", "Hisar", "Btech"],
            ["Mani", "Ranchi", "MSc"],
            ["Yash", "Udaipur", "Mtech"],
        ];
        return (
            <div>
                <Table heading={heading} body={body} />,
            </div>
        );
    }
}

class Table extends Component {
    render() {
        let heading = this.props.heading;
        let body = this.props.body;
        return (
            <table style={{ width: 500 }}>
                <thead>
                    <tr>
                        {heading.map((head, headID) => (
                            <th key={headID}>{head}</th>
                        ))}
                    </tr>
                </thead>
                <tbody>
                    {body.map((rowContent, rowID) => (
                        <TableRow
                            rowContent={rowContent}
                            key={rowID}
                        />
                    ))}
                </tbody>
            </table>
        );
    }
}

class TableRow extends Component {
    render() {
        let row = this.props.rowContent;
        return (
            <tr>
                {row.map((val, rowID) => (
                    <td key={rowID}>{val}</td>
                ))}
            </tr>
        );
    }
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

As we can see from the output we use <th> tag for the heading and <td> tag for the remaining rows. The map function iterates through each row and returns a row, and it is added to the table.