Objects are not valid as React child Fix

What is This Error?

The error "Objects are not valid as a React child" occurs when you try to render a plain JavaScript object directly in JSX. React can only render strings, numbers, arrays, or React elements "" not plain objects.

Common Causes

Rendering an object directly in JSX instead of its properties
Rendering a Date object directly (use .toString() or .toLocaleDateString())
Rendering a Promise instead of awaiting its value
Accidentally passing an object where a string is expected
Rendering state that is an object instead of a primitive

Quick Fix (TL;DR)

Immediate Fix: Problem rendering an object

// Wrong Problem "" rendering an object
const user = { id: 1, name: "Alice" };
return <div>{user}</div>; // Error!

// Correct Solution "" render specific properties
return <div>{user.name}</div>;

// Correct Or use JSON.stringify for debugging
return <div>{JSON.stringify(user)}</div>;

Common Scenarios & Solutions

Failure: Error! user is an object }

function UserCard({ user }) {
  return (
    <div>
      <p>{user}</p>  {/* Error! user is an object */}
    </div>
  );
}

Correction: Access specific property }

function UserCard({ user }) {
  return (
    <div>
      <p>{user.name}</p>   {/* Correct Access specific property */}
      <p>{user.email}</p>
    </div>
  );
}

Objects Not Valid Child Failure Case 2

const createdAt = new Date();
return <p>Created: {createdAt}</p>; // Error!

Objects Not Valid Child Correction 2

const createdAt = new Date();
return <p>Created: {createdAt.toLocaleDateString()}</p>; // Correct
// Or
return <p>Created: {createdAt.toString()}</p>; // Correct

Objects Not Valid Child Failure Case 3

function App() {
  const data = fetch('/api/data').then(r => r.json()); // Promise!
  return <div>{data}</div>; // Error!
}

Correction: Store resolved value in state

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(r => r.json())
      .then(setData); // Correct Store resolved value in state
  }, []);

  return <div>{data?.name}</div>;
}

Failure: Error! status is an object

const [status, setStatus] = useState({ loading: true, error: null });
return <p>{status}</p>; // Error! status is an object

Objects Not Valid Child Correction 4

const [status, setStatus] = useState({ loading: true, error: null });
return (
  <div>
    {status.loading && <p>Loading...</p>}  {/* Correct */}
    {status.error && <p>{status.error}</p>}  {/* Correct */}
  </div>
);

Best Practices to Avoid This Error

Always access specific properties - Use dot notation to access object properties
Convert Dates to strings - Use .toLocaleDateString() or .toString()
Use useEffect for async data - Never render Promises directly
Use TypeScript - Catch type mismatches at compile time
Debug with JSON.stringify - Temporarily use JSON.stringify(obj) to inspect objects
Check API response shape - Verify the structure of data before rendering
Use optional chaining - Use ?. to safely access nested properties

Before you move on

Objects are not valid as React child Fix Mastery Check

4 checks

Locate the exact JSX expression returning an object rather than a renderable value or element.
Render a specific property or map a collection to elements with stable keys.
Use JSON.stringify only as an intentional diagnostic or formatted-data view, not as the default UI fix.
Test null, arrays, dates, API records, and loading states at the component boundary.

Try this next

React JS Objects Not Valid Child Repair Drills

0 of 2 completed

Render a record deliberately
Pass an API user object directly into JSX to reproduce the error, then render selected fields and map nested tags with stable keys. React can render elements and primitives, but a plain object needs an explicit presentation.
Test renderable input boundaries
Add component tests for null, a Date, an array of records, and malformed nested data, with a deliberate fallback for unsupported values. JSON.stringify is useful for diagnostics, not a default user interface.

React JS Questions Learners Ask

JSX braces accept a JavaScript expression, but React still needs the expression to become renderable output. user is a plain object, and React does not know which field you meant to display or how it should become DOM text. user.name is a string or number, so React can render it.

The map call transforms each object into something React can render, usually a JSX element with selected fields inside it. The object itself is not rendered; the returned <li>, <Card>, or text value is.

A Date instance is still an object, even though it represents a single value. React will not guess whether you want a locale date, ISO string, time-only display, or relative label.

Previous Next