Reputation: 7185
Hi I want to dynamically build a table UI.
I have headers
array like this
headers = [
{
text: "id",
value: "id",
},
{
text: "Name",
value: "name",
},
{
text: "Description",
value: "description",
},
{
text: "Created",
value: "createdAt",
},
and items
array like this
items = [
{
id: 1,
name: "Pathum",
description: "Never give up",
createdAt: new Date(),
},
],
In my app
export default function App() {
return (
<div>
<table>
<tr>
{
headers.map(header=>(<th>{header.text}</th>))
}
</tr>
{
items.map(row=>(
<tr>
{
headers.map(({value})=>(
row[value]
))
}
</tr>
))
}
</table>
</div>
);
}
Rendering table headers is okay. The problem is rendering table data. It gives me an error.
Objects are not valid as a React child
This is live code example https://stackblitz.com/edit/react-rj3unu?file=src/App.js
Why could this happen? Any help!
Upvotes: 0
Views: 75
Reputation: 10662
It's because of new Date()
.
You can convert it to a string using new Date().toString()
Objects are not valid as a React child
As new Date()
returns a Date
object.
Upvotes: 1