Objects are not valid as a React child ⚛️ React

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.

Seen on: React

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 async component returning a Promise (outside server components)

⚡ Quick fix

  1. Render a property: {user.name}
  2. Format dates: {date.toLocaleDateString()}
  3. Debug-render with <pre>{JSON.stringify(obj, null, 2)}</pre>
  4. Map arrays of objects to elements

Detailed fix by platform

React

  1. Example:
    jsx
    <p>{error}</p>            // ❌ error is { message, code }
<p>{error.message}</p>    // ✅

How to diagnose

  1. Keys in error — Which object has those keys?
  2. JSX — Where is that value rendered?

🧠 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.