<table> dinámico no representa datos

Question

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.

html reactjs jsx

1

BURGERFLIPPER101 14 oct. 2019 a las 11:31

Answer 1

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.

2

Mohit Prakash 14 oct. 2019 a las 08:35

Answer 2

No hay return en map

this.state.tableData.rows.map(function(row){
                   return( <tr>
                        {row.map(function(rowItem){
                           return <td>{rowItem}</td>
                        })}
                    </tr>)

                })

1

giorgim 14 oct. 2019 a las 08:33

Answer 3

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>
            })}

1

barteezy 14 oct. 2019 a las 08:37

<table> dinámico no representa datos

3 respuestas

Preguntas relacionadas

Nuevas preguntas

html