Error: Objects are not valid as a React child
You tried to render a plain object (or a Promise/Date) directly in JSX; React can only render strings, numbers, elements and arrays of them.
Objects are not valid as a React childIf you meant to render a collection of children, use an array instead Meaning
JSX like {user} where user is an object can’t be turned into DOM. React lists the object’s keys in the error (“found: object with keys {id, name}”) — a great hint about which value it is.
Common causes
- Rendering an object instead of one of its properties (
{user}vs{user.name}) - Rendering a Date object (use
.toLocaleDateString()) - Rendering an API error object directly
- An
asynccomponent returning a Promise (outside server components)
⚡ Quick fix
- Render a property:
{user.name} - Format dates:
{date.toLocaleDateString()} - Debug-render with
<pre>{JSON.stringify(obj, null, 2)}</pre> - Map arrays of objects to elements
Detailed fix by platform
React
- Example:jsx
<p>{error}</p> // ❌ error is { message, code } <p>{error.message}</p> // ✅
How to diagnose
- Keys in error — Which object has those keys?
- JSX — Where is that value rendered?
🔧 Still not fixed?
Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:
Similar errors
- Adjacent JSX elements Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
- Element type is invalid Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
- Functions not valid as child Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render.
Most viewed in React
- No QueryClient set Error: No QueryClient set, use QueryClientProvider to set one
- Functions cannot be passed Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
- Module parse failed Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type
Other ways to find it
Where this error sits
Origin: On your device. Errors that are often confused with or caused by this one (click to open):
🧠 Still stuck? Analyze your error
Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.
💬 What worked for others
No tips yet — did something else fix this for you?
Share what worked for you
Tips are checked by an editor before they appear. Links are removed.
Report a correction or suggest an improvement
Last updated 13 Oct 2026