Whether you’re just starting out with React or have been using it for a while, you might run into the error:
“Objects Are Not Valid as a React Child.”
This happens when you try to show an object directly inside JSX but React does not know how to display objects on the screen.
Summary
In this guide, you will learn how to fix the “Objects Are Not Valid as a React Child” error in different situations and how to avoid it completely.
Key Takeaways
Even though arrays look different from objects, JavaScript treats them as objects, too. So, if you try to directly show an array (like [{…}, {…}]) in JSX without using .map(), React will throw this error.
Following best practices like accessing only the needed parts, mapping arrays, and checking types helps you build React apps that don’t break unexpectedly.
So, what is React Child?
In React, when you place one element inside another, the inner element is called a “child.”
For example:
function App() {
return (
<div>
<span>Hello World</span>
</div>
);
}- Here, <span>Hello World</span> is the child.
- <div> is the parent.
So, you’re saying: “Inside the div, show the span.”
React children can be simple or complex
Now these react children can be something as simple as text (like “Hello”) or more complex like nested components. But whatever they are, they must be something React can understand and display.
Valid React Child Elements
React can only display certain things directly. These include:
- Strings (like “Hello”)
- Numbers (like 123)
- React elements made using JSX (like <div>Hello</div>)
- Arrays of valid React children (like [<p>A</p>, <p>B</p>])
But objects are not valid React children — unless:
- They are React elements
- Or they’re inside an array that React can go through (iterate)
Introduction to the Error
The error “Objects Are Not Valid as a React Child” means React expected something it could show (like text or a component), but instead it got an object or array.
Here’s the kind of error message you might see:
Warning: Objects are not valid as a React child (found object with keys {key}). If you meant to render a collection of children, use an array instead.
This means:
React was given an object and didn’t know how to show it.
Root Causes of the Error
In React, whatever is placed between the opening and closing tags (like mentioned before) of a component is treated as a child.
These children can be:
- Text
- React elements
- Components
But not:
- Objects
- Arrays
Because objects and arrays are data structures that React can’t directly show as content on the screen.
1. Passing an Object as a Child
export default function App() {
return (
<div>
{{ name: "Joe" }}
</div>
);
} What’s wrong?
You’re directly putting an object inside JSX ({{ name: “Joe” }}), and React doesn’t know how to show an object like this.
Result:
Triggers: “Objects Are Not Valid as a React Child” error.
2. Passing Non-Serializable Data as a Child
export default function App() {
const user = { id: 1, role: "admin" };
return (
<div>
{user}
</div>
);
} What’s wrong?
You’re trying to display an object (user) inside JSX. React can’t display plain objects unless you turn them into something like text.
Result:
Throws the same error because user is not a string, number, or React element.
3. Passing an Array of Objects as a Child
export default function App() {
const books = [
{ title: 'Book One', author: 'Author A' },
{ title: 'Book Two', author: 'Author B' },
];
return (
<div>
{books}
</div>
);
}What’s wrong?
You’re trying to render an array of objects directly. React can render arrays of valid elements but not arrays of plain objects.
Result:
Error: React can’t display these objects directly as children.
How To Fix the “Objects Are Not Valid as a React Child” Error?
When you see this error, it’s because React is trying to show something that it doesn’t understand — like an object or an array that hasn’t been handled properly.
JavaScript treats arrays as a kind of object, which is why the error message says “object” even when the issue is with an array.
To fix it, you should:
- Use dot notation to access object values,
- Loop through arrays properly,
- Or convert them into something React can display.
1. Converting Objects to Strings or Numbers
If you’re trying to show an object, you can convert it to a string using JSON.stringify().
export default function App() {
const user = { name: "Imraan", role: "admin" };
return (
<div>
{JSON.stringify(user)}
</div>
);
} This works because now React sees a string, not an object.
2. Rendering Arrays Correctly With the map() Method
Don’t try to show an array of objects directly. Use .map() to turn each item into something React can display.
export default function App() {
const products = [
{ title: 'Laptop', price: 1000 },
{ title: 'Phone', price: 500 },
];
const store = {
name: 'TechStore',
location: 'Mumbai',
};
return (
<>
{products.map((product, index) => (
<div key={index}>
<p>{product.title}</p>
<p>₹{product.price}</p>
</div>
))}
<p>{store.name} - {store.location}</p>
</>
);
} This works because .map() creates valid React elements, and we only show the readable parts of the object (title, price).
3. Using Conditional Rendering to Avoid Rendering Invalid Data Types
If you’re not sure whether a value is something React can show, you can check its type before rendering.
function App() {
const details = { info: "Hidden message" };
return (
<div>
{typeof details === 'string' ? details : null}
</div>
);
} This avoids the error by only rendering if details is a string. Since it’s not, it renders null (nothing) instead of crashing.
Best Practices to Avoid the “Objects Are Not Valid as a React Child” Error
To make sure you don’t run into this error, follow these smart habits while writing React code:
- Only pass things React can display, like text, numbers, JSX elements, or components.
- Don’t pass raw objects or arrays directly as children, always turn them into valid elements.
- Use conditional checks to avoid trying to show data that React can’t handle.