0

estoy haciendoun componente de tabla pero tengo un error, a este le pasare un array pero cuando se lo paso asi:

const content = [
  ["#", "Daniel", "Abrego"],
  ["#", "Daniel", "Abrego"]
]

me aparece todo mal:

este seria el codigo de esa parte de la tabla :

<tbody>
        {content.map((cell, index) => (
          <tr className="h-3 border-b" style={{ borderColor: "#E0E0E0" }}>
            <td className="px-3 py-3">{cell}</td>
          </tr>
        ))}
      </tbody>
0

1 respuesta 1

1

Como bien te han dicho, estás recorriendo tu array content pero no cada uno de los arrays internos. Es decir, ese map inicial sería para las rows (<tr>) y tendrías que tener otro para las celdas (<td>)

import React from "react";
import "./style.css";

export default function App() {
  const content = [["#", "Daniel", "Abrego"], ["#", "Daniel", "Abrego"]];

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Last name</th>
          </tr>
        </thead>
        <tbody>
          {content.map((row, index) => (
            <tr
              className="h-3 border-b"
              key={index}
              style={{ borderColor: "#E0E0E0" }}
            >
              {row.map((cell, i) => (
                <td className="px-3 py-3" key={i}>
                  {i === 0 ? index : cell}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Te dejo aquí el ejemplo funcionando

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.