Lingua-e
JavaScript

What is a Objects Not Valid as React Child?

← Errors

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.

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.

How to fix it

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.

Fixed code

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

Related errors

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