¿Cómo construir una tabla HTML usando ReactJS a partir de arrays?

Si tenemos una array y queremos construir una tabla HTML usando ReactJS, podemos usar la función de mapa. El método map() itera a través de cada elemento de la array y lo convertirá en una fila de la tabla. Primero, crearemos una etiqueta de tabla y luego, primero, iteraremos a través de los nombres de encabezado/columna de la tabla y los convertiremos en un encabezado de tabla usando la etiqueta <th>. Luego iteraremos a través de los datos de la tabla y los convertiremos en cada fila como un cuerpo de tabla usando la etiqueta <td>.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React, { Component } from 'react';
  
class App extends Component {
    render() {
        var heading = ['Name', 'City', 'Course'];
        var 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() {
        var heading = this.props.heading;
        var body = this.props.body;
        return (
            <table style={{ width: 500 }}>
                <thead>
                    <tr>
                        {heading.map(head => <th>{head}</th>)}
                    </tr>
                </thead>
                <tbody>
                    {body.map(row => <TableRow row={row} />)}
                </tbody>
            </table>
        );
    }
}
  
class TableRow extends Component {
    render() {
        var row = this.props.row;
        return (
            <tr>
                {row.map(val => <td>{val}</td>)}
            </tr>
        )
    }
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Como podemos ver en la salida, usamos la etiqueta <th> para el encabezado y la etiqueta <td> para las filas restantes. La función de mapa itera a través de cada fila y devuelve una fila, y se agrega a la tabla.