What causes Objects Not Valid as React Child?

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.

← Errors

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

Debugging in English?

You just read real developer English to fix this. Lingua-e has free exercises built the same way: standups, code reviews, and real workplace scenarios.

Practice developer English, free