I had this error in a React (Next.js) app:

Error: Objects are not valid as a React child (found: [object Promise]).
If you meant to render a collection of children, use an array instead.

After some time trying to figure out what the error meant, I figured out I was exporting my page component as async because I copied it from another Next.js project where this is possible because of the use of the app folder:

export default async function Page() {

}

But it was not possible in the pages folder.

Removing async made it work:

export default function Page() {

}

Lessons in this unit:

0:	Introduction
1:	How to handle errors in React
2:	▶︎ Fix the “Objects are not valid as a React child” error
3:	Fix Uncaught Error Objects are not valid as a React child
4:	How to use useEffect callback with event callbacks
5:	How to debug a React application
6:	How to fix the dangerously SetInnerHTML did not match error in React
7:	React, how to fix the TypeError: resolver is not a function error
8:	How to fix the "cannot update a component while rendering a different component" error in React
9:	Testing React components
10:	How to configure HTTPS in a React app on localhost