cannot seem to get table header to display - reactjs

Question

I have a table where I am feeding data into it from an api, the data is fetched correctly and displays properly for the table row and data which is part of the tbody but inside the thead I try to display a header but nothing seems to be displayed even though the data being passed to the header is being logged to the console. Can anyone see my issue?
Component with table:
import React, {useState, useEffect} from 'react';
import secondsToMinutes from '../utils/utils';
function Table(props) {
const styles = {
div: {
width: 'auto',
height: 'auto',
margin: '0 auto',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
};
const [table, setTable] = useState();
useEffect(() => {
setTable(<table >
<thead>
<tr>
{props.headerData.map(header => {
console.log("table header = ", header);
{header.map((item, i) => {
console.log("header item", item.name)
return (<th
} key={i}>{item.name}</th>
)})}
})}
</tr>
</thead>
<tbody>
{props.data.map((array, index) => (
<tr key={index}>
{array.map((item, i) => {
return (
<tr>
<td key={i}>{item.nameValue} </td>
</tr>
)
})}
</tr>
))}
</tbody>
</table>)
}, [props.data, props.header]);
return (
<div style={styles.div}>
{table}
</div>
)
}
export default Table;

Answer 1

You're not returning anything from the outer map().
Change the thead to:
<thead>
<tr>
{
props.headerData.map(header => {
console.log("table header = ", header);
return header.map((item, i) => {
console.log("header item", item.name)
return (<th key={i}>{item.name}</th>)
})
}}
}
</tr>
</thead>
Note the return before header.map
That said, you shouldn't save the DOM element to the useState. Rather save the data to the state, and then in your return render function render the table