Objects are not valid as a React child

The React error "Objects are not valid as a React child" appears when JSX tries to render a plain object as a child. React can render strings, numbers, elements, arrays of renderable values, fragments, portals, and null / undefined (nothing), but not a generic { ... } object.

The fix is always one of: render a primitive from the object, map the object into elements, use JSON.stringify only for debugging, or serialize with a dedicated UI (tables, definition lists). If the data comes from an API, JSON.stringify pretty print can help you inspect the payload in DevTools before you decide what to render.

Where this runs: The snippets below are JSX — use a React project (Vite, Next.js, CRA) or paste into a .jsx / .tsx file. The small console.log examples run in Node.js and mirror the values you would show in JSX.

Method 1: Render a property instead of the whole object

Passing the whole object triggers the error; pass a string or number field instead.

function UserName() {
  const user = { name: "Ana", role: "admin" };
  // Invalid — do not render the object itself:
  // return <div>{user}</div>;

  return <div>{user.name}</div>;
}

Equivalent values in plain JavaScript (what React will eventually display):

const user = { name: "Ana", role: "admin" };
console.log("react-child-name:", user.name);

You should see one line logging react-child-name: Ana.

Method 2: Render a list from object entries

When you need several fields, map Object.entries to elements and give each row a stable key (here the property name).

function UserDetails() {
  const user = { name: "Ana", role: "admin" };
  return (
    <ul>
      {Object.entries(user).map(([key, value]) => (
        <li key={key}>
          <strong>{key}:</strong> {String(value)}
        </li>
      ))}
    </ul>
  );
}

Same data shaping without JSX:

const user = { name: "Ana", role: "admin" };
console.log(
  "react-child-entries:",
  Object.entries(user)
    .map(([key, value]) => `${key}:${value}`)
    .join(" | ")
);

You should see one line logging react-child-entries: name:Ana | role:admin.

Method 3: JSON.stringify for debugging only

JSON.stringify() is fine in logs or temporary UI while you build the real renderer. Do not ship large JSON.stringify blobs as the final user-facing design.

const user = { name: "Ana", role: "admin" };
console.log("react-child-json:", JSON.stringify(user));

You should see one line logging react-child-json: {"name":"Ana","role":"admin"}.

In JSX you could write {JSON.stringify(user)} during development, but prefer structured markup from Method 1 or 2 for production.

Summary

The error means JSX received a plain object where it expected renderable children. Fix it by rendering fields, mapping entries to elements with keys, or stringifying only for debugging. Arrays are allowed if every element is itself renderable — an array of objects is still wrong unless you map each object to JSX.

Official documentation

• React: Describing the UI
• React: Rendering Lists
• React: Conditional Rendering