React Objects are not valid as a React child

Question

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!

Answer 1

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.

Answer 2

您还缺少表格数据标签:-)

<td>{row[value]}</td>