React

Objects are not valid as a React child

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 short: JSX tried to render a whole object (or a Promise or Date) instead of a string, number, or element.

Why it happens

Writing {user} instead of {user.name}, rendering an API error object, rendering a Date directly, or rendering a Promise from an async function inside a Client Component.

How to fix it

1. Find the {...} expression in the component the stack trace names.
2. Render a field: {user.name}; format dates: {date.toLocaleDateString()}.
3. For lists, map to elements with keys: {items.map(i => <li key={i.id}>{i.name}</li>)}.
4. If it says [object Promise], await the data first (in a Server Component, or in useEffect in a Client Component).
5. For debugging, render {JSON.stringify(value)} temporarily.

Copy-paste fix prompt

I'm getting this error in my app:

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.

[Paste the full error, stack trace, and the file it points to here]

Likely cause: JSX tried to render a whole object (or a Promise or Date) instead of a string, number, or element.

Task: Locate the JSX expression rendering an object, Date, or Promise and change it to render the intended field or mapped elements.

Rules:
- First explain the root cause in 2 sentences and list the files you'll change.
- Make the smallest change that fixes it. Don't refactor unrelated code.
- Don't disable security or checks (RLS, auth, signature verification, type checking, CORS allow-all) to make the error disappear.
- Never print or hard-code secret keys.
- Finish by telling me exactly how to verify the fix.

Common with: Cursor, Lovable, Bolt, v0. Last reviewed 2026-11-13.