Fix guides / React: "Objects are not valid as a React child"

How to fix React "Objects are not valid as a React child"

The screen goes blank and the console says 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. You are putting a whole object in the page where React expects text.

Why it happens

• Rendering an object directly: {user} instead of {user.name}. Often happens when an API or Supabase join returns { profiles: { name } } instead of a plain string.
• Rendering a Date: {order.createdAt} when it is a Date object.
• Rendering an error object: {error} instead of {error.message}.
• In a client component, rendering a Promise because an async function was called without awaiting.

Fix

The "found: object with keys" list tells you what the object looks like. Search your JSX for that variable and render a field:

{user.name}
{new Date(order.created_at).toLocaleDateString()}
{error?.message}
{items.map(item => <li key={item.id}>{item.title}</li>)}

For debugging, {JSON.stringify(data)} renders safely so you can see the shape.

Async data

Load the data in useEffect or a data library, store the result in state, and render only when it has arrived: if (!data) return <Spinner />;

Check the fix

1. The page renders with real and empty data.
2. No red errors in the console.

Last updated 2026-10-21.