Estoy tratando de crear una tabla dinámica que muestre los datos insertados según un formato de
{headers: ["header1", "header2"], rows: [["data1", "data2"], ["moredata", "wowoso muchdata"]]}
Filas es solo una matriz de matrices y cada matriz es una fila en la tabla.
Paso estos datos a un componente React que representa la tabla. El código es el siguiente:
export default class StandardTable extends React.Component<Props, State>{
constructor(props){
super(props);
this.state = {
tableData: this.props.data
}
}
render(){
return(
<div>
<table id="StandardTable">
<tbody>
{this.state.tableData.headers.map(function(header){
<th>{header}</th>
})}
</tbody>
<tbody>
{this.state.tableData.rows.map(function(row){
<tr>
{row.map(function(rowItem){
<td>{rowItem}</td>
})}
</tr>
})}
</tbody>
</table>
<style jsx>
{`
#StandardTable{
border: 1px solid black;
}`}
</style>
</div>
);
}
}
Puedo consolar el registro del objeto de datos y todos los datos están allí. También está iterando a través de los datos en las funciones del mapa, ya que puedo verificar en la consola, pero desafortunadamente la tabla aparece en blanco en la práctica.
3 respuestas
Puedes probar esto, no es necesario volver, puedes usar la función de flecha
<table id="StandardTable">
<tbody>
{this.state.tableData.headers.map((header) => (
<th>{header}</th>
))}
</tbody>
<tbody>
{this.state.tableData.rows.map((row)=>(
<tr>
{row.map((rowItem)=>(
<td>{rowItem}</td>
))}
</tr>
))}
</tbody>
</table>
Espero que funcione.
No hay return
en map
this.state.tableData.rows.map(function(row){
return( <tr>
{row.map(function(rowItem){
return <td>{rowItem}</td>
})}
</tr>)
})
Es porque olvidaste el return
. Simplemente haga esto en las funciones de su mapa:
{this.state.tableData.headers.map(function(header){
return <th>{header}</th>
})}
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].