Mostrar una Tabla con React Js

 in Javascript by

Seguimos creando ejemplos con React Js, ahora vamos a crear y mostrar una tabla HTML con React, de una manera facil apartir de un array con los datos.

En el articulo anterior hablamos sobre como Mostrar una lista con React Js, vamos a usar la logica de ese ejemplo.

Todo el codigo que vamos a escribir lo vamos a colocar en el archivo App.js de nuestro proyecto en React.

Codigo

Lo primero que vamos a definir es un array asociativo con los datos, cada fila con sus valores.

const elements = [
  {name: "Gallina", english:"Hen", id:1, tipo:"Domestico"},
  {name: "Mono", english:"Monkey", id:2, tipo:"Salvaje"},
  {name: "Perro", english:"Dog", id:3, tipo:"Domestico"},
  {name: "Gato", english:"Cat", id:4 ,tipo:"Domestico"},
  {name: "Ardilla", english:"Squirel", id:5,tipo:"Salvaje"},
  {name: "Tigre", english:"Tiger", id:6,tipo:"Salvaje"},
  {name: "Gorila", english:"Gorilla", id:7,tipo:"Salvaje"},
  {name: "Tortuga", english:"Turtle", id:8,tipo:"Marino"},
  {name: "Tiburon", english:"Shark", id:9,tipo:"Marino"},
  {name: "Ballena", english:"Whale", id:10,tipo:"Marino"}
  ];

Tenemos 10 elementos con los siguientes atributos: name, english, id y tipo.

Y ahora vamos a hacer unn recorrido del array y en cada fila de la tabla vamos a agregar un elemento del array, y en cada columna pondremos los atributos.

function App() {
  /* Funcion para mapear los elementos de la lista y converirlo en elementos LI*/
  const listitems = elements.map(ele =>
    <tr key={ele.id}>
    <td>{ele.id}</td>
    <td>{ele.name}</td>
    <td>{ele.english}</td>
    <td>{ele.tipo}</td>
    </tr>
    );
    /* Mostramos la lista de elementos y mostramos los datos */
  return (
    <div className="App">
    <h1>Tabla de Mascotas</h1>
     <table border="1">{listitems}</table>
    </div>
  );
}

export default App;

Usamos la funcion “map” para recorrer el array y crear una coleccion de elementos tipo “<tr>” al final mostramos elemento “table” y le pasamos como parametro la coleccion de elementos que creamos.

Resultado

Para ver el resultado tenemos que ejecutar los comandos.

cd apptabla1
npm start

Y este es el resultado.

Leave a comment