← All errors

Objects are not valid as a React child

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.

In one sentence: You tried to put a whole object straight into JSX. React can only render text, numbers, elements, or arrays of them.

What it means

When you write `{user}` in JSX, React needs something it can display. A plain object (or a Date, or a Promise) isn't displayable, so React stops. The keys in the message tell you which object it was.

Common causes

• Rendering `{user}` instead of `{user.name}`.
• Rendering a Date object directly instead of `date.toLocaleDateString()`.
• An async server/client component mix-up where a Promise ends up in JSX.
• The API returns objects where you expected strings (e.g. `{ message: {...} }`).

How to fix it

1. Render a specific field: `{user.name}`.
2. For lists, map to elements: `{items.map(i => <li key={i.id}>{i.name}</li>)}`.
3. For debugging, show it as text: `<pre>{JSON.stringify(data, null, 2)}</pre>`.

Prompt to paste into your AI tool

React says objects are not valid as a React child (keys: ...). Render the specific field or map the array to elements instead of rendering the object.

Related errors

• TypeError: Cannot read properties of undefined
• CORS error: blocked by CORS policy
• Hydration failed: server HTML didn't match the client (Next.js)
• Module not found: Can't resolve '...'