← All errors · Next.jsReact & Next.js rendering errors

Objects are not valid as a React child

Exact error

Error: Objects are not valid as a React child (found: object with keys {id, name}). If you meant to render a collection of children, use an array instead.

What it means

JSX tried to render a plain object. React can render strings, numbers, elements and arrays, but not objects.

Likely causes

• Rendering {user} instead of {user.name}.
• Rendering a Date object or a Promise.
• Rendering an error object directly.

How to fix it

1. Render a specific field or convert to a string:

   <p>{user.name}</p>
   <p>{date.toLocaleDateString()}</p>
   <pre>{JSON.stringify(data, null, 2)}</pre>

2. In client components, make sure you are not rendering a Promise from an un-awaited async call.

Prevent this next time

• Add ESLint with eslint-config-next (includes the React Hooks rules) and fix warnings before shipping.
• Run `next build` in CI on every pull request so hydration and render errors surface before production.

Guide: catch outages before your users do.

Related errors

• Too many re-renders. React limits the number of renders to prevent an infinite loop
• async/await is not yet supported in Client Components