JavaScript

Objects Not Valid as React Child: What It Means and How to Fix It

Error reference

Objects Not Valid as React Child

Language

JavaScript

Severity

High

When it happens

React can only render strings, numbers, booleans, null, undefined, and React elements as children.

Potential fixes

Access the specific string or number property you want to display. Use JSON.stringify(obj) for debugging only (not for production UI). Transform API responses into renderable primitives before rendering them.

Deep dive

React can only render strings, numbers, booleans, null, undefined, and React elements as children. Passing a plain JavaScript object directly as JSX content throws this error because React does not know how to serialize an arbitrary object to the DOM.

Why it happens

•Rendering a whole object instead of one of its string properties.
•Accidentally passing a Date object instead of calling .toLocaleDateString().
•Rendering the result of an API call before it is transformed into renderable data.
•A Promise or array of objects placed directly in JSX.

Potential fixes

Access the specific string or number property you want to display. Use JSON.stringify(obj) for debugging only (not for production UI). Transform API responses into renderable primitives before rendering them.

Examples

JavaScript

Code that triggers the error

function Profile({ user }) {
  return <div>{user}</div>; // user is an object, not a string
}

Error output

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

Fixed code

function Profile({ user }) {
  return (
    <div>
      <span>{user.name}</span>
      <span>{user.email}</span>
    </div>
  );
}

Practice in English

How would you explain an Objects Not Valid as React Child to a fellow dev? Choose the right phrase:

"I hit an error...

Ready to practice your English at work?

Lingua-e has interactive exercises built around real developer conversations: standups, code reviews, retrospectives, and more. Practice until it comes naturally.

Try Lingua-e for free