Error3 Fixes Available

Objects are not valid as a React child

Error: Objects are not valid as a React child (found: object with keys {id, name})

What does this error mean?

React can only render strings, numbers, arrays, and React elements. If you try to render a plain JavaScript object directly in JSX, React throws this error because it doesn't know how to display it.

Common Causes

Rendering an object directly: {user} instead of {user.name}
Rendering a Date object directly instead of calling .toLocaleDateString()
Rendering an API response object before extracting the needed property
Accidentally passing an object where a string is expected

How to Fix It (3 Solutions)

Access the specific property you want to display

Extract the string or number property from the object.

Code

// ❌ Renders the whole object — crashes
<div>{user}</div>

// ✅ Render a specific property
<div>{user.name}</div>
<div>{user.email}</div>

Convert Date objects to strings

Call a formatting method before rendering.

Code

// ❌ Crashes — Date is an object
<span>{new Date()}</span>

// ✅ Convert to string first
<span>{new Date().toLocaleDateString()}</span>

Use JSON.stringify for debugging

To quickly inspect an object during development.

Code

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

Related Errors

JavaScript

TypeError: Cannot read properties of undefined

View fix

useContext must be used within a Provider

View fix

Too many re-renders. React limits the number of renders

View fix

Browse all error fixes