Blog
2 min read

"Objects Are Not Valid as a React Child": How to Fix It

React can render text, numbers and elements, but not plain objects. This error means you put an object, a Date, or a Promise inside JSX. How to find which value it is from the 'keys' in the message, and the fix for each common case.

Error: Objects are not valid as a React child (found: object with keys {id, name, email}).
If you meant to render a collection of children, use an array instead.

React can display strings, numbers, elements and arrays of those. It can't display a plain JavaScript object, because it doesn't know how. This error means something inside your JSX's { } is an object.

The message tells you the object's keys — {id, name, email} — which is the best clue to which variable it is.

Cause 1: rendering an object instead of a property

<p>Welcome, {user}</p>        // ❌ user is { id, name, email }
<p>Welcome, {user.name}</p>   // ✅

Pick the property you meant to show. (What is JSX?)

Cause 2: rendering a Date

<span>{order.createdAt}</span>   // ❌ if it's a Date object

The message says found: [object Date]. Format it as text:

<span>{order.createdAt.toLocaleDateString()}</span>
<span>{new Date(order.createdAt).toLocaleString('en-GB')}</span>

(Dates and time zones in apps)

Cause 3: rendering a whole API response

const data = await res.json()   // { items: [...], total: 42 }
return <div>{data}</div>        // ❌

Render the parts:

return (
  <ul>
    {data.items.map(item => <li key={item.id}>{item.title}</li>)}
  </ul>
)

To quickly see what an object contains while debugging:

<pre>{JSON.stringify(data, null, 2)}</pre>

Cause 4: a Promise (missing await)

found: [object Promise]

You rendered the result of an async function without waiting for it. In a client component, load data in an effect or with a data library and store it in state:

const [user, setUser] = useState(null)
useEffect(() => { fetchUser().then(setUser) }, [])
return <p>{user?.name}</p>

In a Next.js server component, you can await directly — but only in the component itself, not inside JSX. (JavaScript promises, TanStack Query vs useEffect)

Cause 5: an error object

{error && <p>{error}</p>}       // ❌ if error is an Error object
{error && <p>{error.message}</p>} // ✅

Cause 6: passing an object where a component expects text

<Button label={{ text: 'Save' }} />   // and Button renders {label}

Check what the component expects. TypeScript catches this kind of mismatch before you run the code. (React props explained)

Cause 7: a component used as a value

const Icon = { home: HomeIcon }
<div>{Icon}</div>             // ❌
<div><Icon.home /></div>      // ✅

Finding it fast

  1. Read the keys in the error message.
  2. Search your component for variables with those properties.
  3. Check the component named in the stack trace (React shows "The above error occurred in the <UserCard> component").
  4. Add console.log(typeof value, value) just before the JSX if you're unsure. (Browser developer tools)

EasySpawn runs your React app with a live preview next to Claude Code, so you can paste this error and watch the fix land. See how it works or join the waitlist.

Related: What Is JSX? · "Cannot Read Properties of Undefined" · React useEffect Explained · How to Read an Error Message

Keep reading