Динамический <table>не рендеринг данных

Question

Я пытаюсь создать динамическую таблицу, которая отображает вставленные данные на основе формата

{headers: ["header1", "header2"], rows: [["data1", "data2"], ["moredata", "wowoso muchdata"]]}

Строки - это просто массив массивов, а каждый массив - это строка в таблице.

Я передаю эти данные в компонент React, который отображает таблицу. Код следующий:

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




}

Я могу консольный журнал объекта данных, и все данные там. Он также перебирает данные в функциях карты, как я могу проверить в консоли, но, к сожалению, на практике таблица пуста.

Answer 1

вы можете попробовать это, не нужно возвращаться, вы можете использовать функцию стрелки

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

Надеюсь, это сработает.

Answer 2

Это потому что вы забыли return. Просто сделайте это в функциях вашей карты:

            {this.state.tableData.headers.map(function(header){
                return <th>{header}</th>
            })}

Answer 3

Нет return в map

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

                })