Objects are not valid as React child Fix: Tutorial, Examples, FAQs & Interview Tips

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)

Quick Solution

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

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

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

Common Scenarios & Solutions

Problem

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

Solution

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

Problem

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

Solution

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

Problem

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

Solution

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

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

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

Problem

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

Solution

const [status, setStatus] = useState({ loading: true, error: null });
return (
  <div>
    {status.loading && <p>Loading...</p>}  {/* ✅ */}
    {status.error && <p>{status.error}</p>}  {/* ✅ */}
  </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

Related Errors

Frequently Asked Questions

Why can't React render objects?

React's rendering engine only knows how to display strings, numbers, arrays, and React elements. Plain JavaScript objects have no defined way to be converted to DOM output, so React throws an error.

How do I render an object in React?

Access specific properties using dot notation (e.g., user.name), map over arrays of objects, or use JSON.stringify() for debugging purposes.

Why does rendering a Date cause this error?

Date is a JavaScript object, not a primitive. Convert it to a string first using .toString(), .toLocaleDateString(), or .toISOString().

How do I render data from an API?

Use useEffect to fetch data and useState to store the resolved value. Never render the Promise itself "” wait for it to resolve and store the result in state.

Can I render null or undefined in React?

Yes! null, undefined, and false are valid React children "” they render nothing. Only plain objects (non-null) cause this error.

Previous Next

Objects are not valid as React child Fix: Tutorial, Examples, FAQs & Interview Tips

What is This Error?

Common Causes

Quick Fix (TL;DR)

Quick Solution

Common Scenarios & Solutions

Problem

Solution

Problem

Solution

Problem

Solution

Problem

Solution

Best Practices to Avoid This Error

Related Errors

Frequently Asked Questions

Level Up Your React JS Skills

Popular Tutorials

Ready to Level Up Your Skills?