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

You are also missing the table data tag :-)

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

Answer 2

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.