Objects Not Valid as a React Child Error

Fix 'Objects are not valid as a React child' error. Learn how React renders content and why objects cannot be directly rendered.

What Does This Error Mean?

This React error occurs when you try to render a JavaScript object directly in JSX. React can only render primitives (strings, numbers) and React elements. Objects must be converted to a string, mapped, or accessed by property before rendering.

Common Causes

Accidentally passing an object in JSX: {someObject}

Object stored in state rendered directly in the component

Array.map() missing a return statement (returns undefined for some items)

API response object rendered before extracting properties

Date object rendered without toString()

How to Fix It

Access specific properties

Render object properties individually instead of the whole object.

const user = { name: "John", email: "john@example.com" }

// ❌ Error: objects are not valid as a React child
return <div>{user}</div>

// ✅ Render specific properties
return (
  <div>
    <p>{user.name}</p>
    <p>{user.email}</p>
  </div>
)

Use JSON.stringify for debugging

Convert objects to strings for display during development.

function DebugView({ data }) {
  return (
    <pre>{JSON.stringify(data, null, 2)}</pre>
  )
}

Map arrays of objects

Use array.map() to render lists of objects.

const items = [{ id: 1, text: "First" }, { id: 2, text: "Second" }]

// ✅ Map objects to JSX
return (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
)

Before & After Examples

❌ Before

function User({ user }) {
  return <div>{user}</div> // Error!

✅ After

function User({ user }) {
  return <div>{user.name}</div> // Works!

Related Tools

Use these tools to debug and fix this error:

JSON Formatter

Format, validate, and minify JSON with real-time syntax checking.

JSON Path Tester

Test JSONPath expressions against JSON data and see matched results.

Word Counter

Count words, characters, sentences, and paragraphs in your text instantly.

Related Errors

Other common errors in this category:

401

401 Unauthorized Error

Learn what a 401 Unauthorized error means, common causes, and how to fix authentication failures in your web applications.

403

403 Forbidden Error

Learn what 403 Forbidden means, how it differs from 401, and how to fix access denied errors in your applications.

404

404 Not Found Error

Learn what 404 Not Found means, common causes, and how to fix broken links and missing resources on your website or API.

429

429 Too Many Requests Error

Learn what 429 Too Many Requests means, how rate limiting works, and how to handle or avoid hitting API rate limits.

Browse All Error Guides