Cómo dar formato a una tabla en React teniendo un JSON como fuente de datos?

publicado por: Anonymous

Estoy aprendiendo React y tengo una aplicación en la cual tengo un JSON que quiero que sea mostrado como una tabla en React, tengo este código

import Data from '../components/users.json';

export default withAuth(class Users extends Component {

    render() {
        return (
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '150px', marginRight: '500px', color: 'black' }}>
                {Data.map((user, index) => {
                    return <div>
                        <table class="table">
                            <tr>
                                <th>ID</th>
                                <th>Firstname</th>
                                <th>Lastname</th>
                            </tr>
                            <tr>
                                <td>{user.id}</td>
                                <td>{user.firstName}</td>
                                <td>{user.lastName}</td>
                            </tr>
                        </table>
                    </div>
                })}
            </div>
        );
    }
});

Pero en lugar de mostrar el encabezado una vez lo hace dos veces y no en forma de lista, como se ve en la imagen.

introducir la descripción de la imagen aquí

¿Qué podría hacer?

solución

Esto es básicamente por la forma en como renderiza su componente, cuando itera un array o una colección, en este caso con map, todo lo que esté dentro se “repetirá” de acuerdo a la cantidad de elementos, si tiene 2 elementos mostrará dos veces una tabla.

Además para añadir clases, se utiliza className="" en lugar de class.

La solución añadir dentro del map solo las filas tr del contenido de la tabla, para que se muestre como una tabla común y añadir los elementos thead y tbody para evitar los warnings.

Además se recomienda utilizar llaves (keys) cuando se itera elementos, valor único como el id.

return (
    <div
      style={{
        display: "flex",
        justifyContent: "flex-end",
        marginTop: "150px",
        marginRight: "500px",
        color: "black"
      }}
    >
      <div>
        <table className="table">
          <thead>
            <tr>
              <th>ID</th>
              <th>Firstname</th>
              <th>Lastname</th>
            </tr>
          </thead>
          <tbody>
            {Data.map((user, index) => {
              return (
                <tr key={user.id}>
                  <td>{user.id}</td>
                  <td>{user.firstName}</td>
                  <td>{user.lastName}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );

DEMO

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *