How to build an HTML table using ReactJS from arrays ? Last Updated : 10 Nov, 2023 Comments Improve Suggest changes Like Article Like Report 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.jsReact JSJavaScript Array.map()HTML TableApproach: 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 foldernameStep 2: After creating your project folder i.e. foldername, move to it using the following command: cd foldernameProject 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 startOutput: 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. Comment More infoAdvertise with us Next Article How to build an HTML table using ReactJS from arrays ? K KapilChhipa Follow Improve Article Tags : Web Technologies ReactJS React-Questions HTML-Questions Similar Reads How to Create an HTML Table from an Object Array Using JavaScript ? Tables are a fundamental part of web development, and displaying data in a structured manner is a common requirement. JavaScript provides a powerful way to dynamically generate HTML content, making it easy to create tables from object arrays. Table of Content Using innerHTML propertyUsing appendChil 2 min read How to create a table row using HTML? Define a row in a table by using a <tr> tag in a document. This tag is used to define a row in an HTML table. The tr element contains multiple th or td elements. Syntax:<tr> ... </tr>Example: In this example, a table row in HTML5, utilizes the <tr> tag within the <tbody 1 min read How to fetch data from JSON file and display in HTML table using jQuery ? The task is to fetch data from the given JSON file and convert data into an HTML table. Approach: We have a JSON file containing data in the form of an array of objects. In our code, we are using jQuery to complete our task. The jQuery code uses getJSON() method to fetch the data from the file's loc 3 min read How to pass data into table from a form using React Components ? React JS is a front-end library used to build UI components. This article will help to learn to pass data into a table from a form using React Components. This will be done using two React components named Table and Form. We will enter data into a form, which will be displayed in the table on 'submi 3 min read How to print an array in table format using angularJS? Given an array & the task is to print the given array in the tabular format using AngularJS. In JavaScript, data can be stored in the form of arrays. Each of the array items has unique indexing, starting from 0. But what if the developer wants to display all the items that are in the array, on t 4 min read How to get first N number of elements from an array using ReactJS? To get the first N number of elements from an array using React JS simply means to display the N number of elements of the array. PrerequisitesReact JSReact Class ComponentApproach to get first N number of elements:We will create an array containing some values using the react class component and fr 2 min read How to make a Animated Table using HTML and CSS ? Table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In this article, we are going to create a Table with animation over its columns. We are going to implement it using HTML and CSS. Approa 3 min read How to create a food recipe app using ReactJS ? We are going to make a food recipe app using React.js.Pre-requisite:React hooksReact componentsJavaScript ES6APIÂ CSSApproach: Here in this app we should have a component where we are going to show our food recipes. And we need to fetch all the required food recipes using a food recipe API. We will f 3 min read How to Create a Basic Notes App using ReactJS ? Creating a basic notes app using React JS is a better way to learn how to manage state, handle user input, and render components dynamically. In this article, we are going to learn how to create a basic notes app using React JS. A notes app is a digital application that allows users to create, manag 4 min read How to Create RESTful API and Fetch Data using ReactJS ? React JS is more than just an open-source JavaScript library, it's a powerful tool for crafting user interfaces with unparalleled efficiency and clarity. One of React's core principles is its component-based architecture, which aligns perfectly with the Model View Controller (MVC) pattern. React com 5 min read Like