React is a popular JavaScript library for building user interfaces, widely used by developers worldwide. It simplifies the process of building complex UIs by providing reusable components and state management.
Whether using React as a beginner or an experienced developer, it’s not uncommon to see error messages like “Objects Are Not Valid as a React Child.”
In this article, we will explore the causes of this error and provide solutions you can use to fix it.
What Causes the “Objects Are Not Valid as a React Child” Error?
The “Objects Are Not Valid as a React Child” error is a common error in React programming. It occurs when a component receives an object as a child instead of a valid React element. The error message usually looks like this:
The error message implies that the component received an object instead of a valid React child element (such as strings, numbers, or React elements, but not arrays or objects). The primary cause of this error is passing an invalid data type and non-serializable data as a child.
1. Passing an Object as a Child
export default function App() {
return (
<div>
{{ message: "Hello world!" }}
</div>
);
}In this example, the App component tries to render an object as a child element. This will trigger the “Objects Are Not Valid as a React Child” error, as React does not recognize objects as valid child elements.
2. Passing Non-Serializable Data as a Child
export default function App() {
const message = { text: "Hello world!" };
return (
<div>
{message}
</div>
);
}In this code above, the App component tries to render a non-serializable data type (an object) as a child element. This will trigger the “Objects Are Not Valid as a React Child” error, as React requires that all child elements be serializable.
3. Passing Array as a Child
export default function App() {
const students = [
{ name: 'John Doe', age: 12 },
{ name: 'Jane Doe', age: 14 },
];
const locale = {
state: 'Florida',
country: 'USA',
};
return (
<>
<span>{students}</span>
<div>{locale}</div>
</>
);
}In this code, we have an array students and an object locale that we’re trying to render as children. However, passing an array or object as a child is not valid in React — this code will trigger the “Objects Are Not Valid as a React Child” error.
How To Fix the “Objects Are Not Valid as a React Child” Error
To fix this error, it’s important to remember that arrays and objects are iterable in JavaScript. JavaScript considers arrays as a special type of object, which is why the error message will still read “Objects Are Not Valid as a React Child” even if the issue is with an array.
To access the data within an array or object, you can iterate through the array using a loop, access specific elements using their index number, or use dot notation for objects.
Here are some of the most common solutions:
1. Converting Objects to Strings or Numbers
One way to fix the error is to convert the object to a string or number before passing it as a child. For example:
export default function App() {
const message = { text: "Hello world!" };
return (
<div>
{JSON.stringify(message)}
</div>
);
}In this example, we convert the message object to a string using the JSON.stringify() method before passing it as a child element. This will prevent the “Objects Are Not Valid as a React Child” error from occurring.
2. Rendering Arrays Correctly With the map() Method
Another common cause of the error is incorrect usage of arrays in React. If you try to render an array directly as a child element, you will trigger the “Objects Are Not Valid as a React Child” error.
Instead, you should use the map() method to convert each item in the array to a valid React child element.
export default function App() {
const students = [
{ name: 'John Doe', age: 12 },
{ name: 'Jane Doe', age: 14 },
];
const locale = {
state: 'Florida',
country: 'USA',
};
return (
<>
{students.map((student, index) => (
<div key={index}>
<span>{student.name}</span>
<span>{student.age}</span>
</div>
))}
<div>
{locale.state}, {locale.country}
</div>
</>
);
}In this code, we use the map() method to iterate over the students array and convert each element into a div containing the student’s name and age. We also add a key prop to each child element to optimize rendering performance.
3. Using Conditional Rendering to Avoid Rendering Invalid Data Types
If you are passing data that might not be valid as a React child, you can use conditional rendering to prevent the error from occurring.
function App() {
const message = { text: "Hello world!" };
return (
<div>
{typeof message === 'string' ? message : null}
</div>
);
}In this example, we use conditional rendering only to render the message if it is a string. This will prevent the “Objects Are Not Valid as a React Child” error from occurring.
Best Practices For Preventing the “Objects Are Not Valid as a React Child” Error
To prevent the “Objects Are Not Valid as a React Child” error from occurring in the first place, it’s important to follow best practices when building React components. Some of the most important best practices include:
- Always pass valid React child elements as children
- Avoid passing non-serializable data as children
- Use conditional rendering to handle edge cases and invalid data types
Summary
In this article, we have learned how to solve the “Objects Are Not Valid as a React Child” error in all possible scenarios and the best practices to avoid the error from occurring.
It’s important to remember that Arrays are considered a special type of Object, so when you fail to loop through an array before rendering it in your React application, it will throw the “Objects Are Not Valid as a React Child” error.
If you’ve got a React application you want to share with the world, check out Kinsta’s Application Hosting service. You can get started for free.
Share your experience! Did you encounter this issue before? If so, how did you solve it? Did you use any other approaches not covered in this article? Let us know in the comments.
