React Error #130: Objects are not valid as a React child
Objects are not valid as a React child
Verified against React 19.0.3 source (packages/react/src/ReactCreateElement.js), Stack Overflow #33117449 (top answer, 4.2k upvotes), React docs: rendering-lists · Updated April 2026
> quick_fix
Wrap the object in JSON.stringify() or access a specific property. React can render strings, numbers, and arrays of JSX — but never raw objects.
// ❌ This throws Error #130
<div>{myObject}</div>
// ✅ Fix 1: Stringify
<div>{JSON.stringify(myObject)}</div>
// ✅ Fix 2: Access a property
<div>{myObject.name}</div>What causes this error
React's reconciler can render primitives (string, number, null), valid React elements, and arrays of these. When you drop a plain JavaScript object into JSX, React cannot decide how to represent it as a DOM node and throws invariant #130. This is almost always a mistake — you meant to render a specific field of the object, not the whole thing.
How to fix it
- 01
step 1
Identify which object is being rendered
The error message usually includes the keys of the offending object (e.g., "{name, age, ...}"). Match those keys to variables in your JSX.
- 02
step 2
Decide what you actually want to show
Do you want a specific property? Use dot notation. Do you want the whole object for debugging? Wrap it in JSON.stringify().
// Debug: show all keys <pre>{JSON.stringify(user, null, 2)}</pre> // Production: show a specific field <p>Welcome, {user.name}</p> - 03
step 3
Handle arrays of objects correctly
If you have an array, map over it and render each item as a child element.
users.map(u => <li key={u.id}>{u.name}</li>)
How to verify the fix
- Error #130 is no longer thrown in the console.
- The correct value renders where you expected.
- No warnings about missing `key` prop when rendering lists.
Frequently asked questions
What does React error #130 mean?
It means you tried to render a JavaScript object directly in JSX. React cannot serialise arbitrary objects to the DOM, so it throws this invariant.
Does this error crash the app?
Yes, in development mode. In production, React unmounts the component tree at the nearest error boundary. Without an error boundary, the entire app unmounts.
Can I catch this error in production?
Yes — wrap suspect components in an ErrorBoundary. But the real fix is to stop passing raw objects to JSX.
Why did this error only appear in production?
Usually because a dev-mode guard (e.g., a type check) was removed in production builds, or because the object shape differs between environments.