Dynamic <table> not rendering data - html

Question

I'm trying to create a dynamic table that renders data inserted based on a format of
{headers: ["header1", "header2"], rows: [["data1", "data2"], ["moredata", "wowoso muchdata"]]}
Rows is just an array of arrays and each array is a row in the table.
I pass this data into a React component which renders the table. The code is the following:
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>
);
}
}
I am able to console log the data object and all the data is there. It's also iterating through the data in the map functions as I can check in console, but unfortunately the table shows up blank in practice.

Answer 1

can you try this, no need to return, you can use arrow function
<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>
Hope it will work.

Answer 2

It's because you forgot the return. Just do this in your map functions:
{this.state.tableData.headers.map(function(header){
return <th>{header}</th>
})}

Answer 3

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