Así que he creado este componente Table, destinado a ser reutilizable.

Pero tengo este problema en el que los datos no llenaron toda la fila correctamente. Se apiló en las dos primeras filas.

Aquí está mi código hasta ahora:

Menu.js

export const AddMenu = () => {
  const theadData = ["No", "Name", "Category", "Price"];
  const tbodyData = [
    {
      id: 1,
      items: [1, "Hamburger", "Fast Food", 150],
    },
    {
      id: 2,
      items: [2, "Pizza", "Fast Food", 100],
    },
  ];

  return (
    <div className="container">
      <h1>Add Menu</h1>
      <Table theadData={theadData} tbodyData={tbodyData} />
    </div>
  );
};

Table.js

export const Table = ({
  theadData,
  tbodyData,
}) => {
  return (
    <div className="table">
      <table>
        <thead>
          <tr>
            {theadData.map((item) => {
              return <th title={item}>{item}</th>;
            })}
          </tr>
        </thead>
          <tr>
            {tbodyData.map((item) => {
              return <td key={item}>{item.items}</td>;
            })}
          </tr>
        </tbody>
      </table>
    </div>
  );
};

Gracias por cierto, espero obtener una respuesta.

0
panzerstrike 13 mar. 2021 a las 22:09

2 respuestas

La mejor respuesta

Agregue un segundo mapa para recorrer las filas y luego recorrer las celdas, así:

{
  tbodyData.map((row, index) => (
    <tr key={index}>
      {row.map((item) => {
        return <td key={item}>{item}</td>;
      })}
    </tr>
  ));
}
1
Mr. Hedgehog 13 mar. 2021 a las 19:13

Mapeó row de la tabla, pero es necesario map columns también:

<tbody>
    {tbodyData.map((row, index) => (
      <tr key={index}>
        {{row.items.map((column, ind) => (
          <td key={ind}>
            {column}
          </td>
        ))}
      </tr>
    ))}
</tbody>
0
StepUp 13 mar. 2021 a las 19:26