"Objects are not Valid as a React Child" Fixing Error

If you’ve ever worked with React, you might have seen "Objects are not Valid as a React Child" error at some point. It’s a very common error in React. It’s not that hard to fix once you get your fundamentals right.

In this article, you’ll learn what causes the "Objects are not Valid as a React Child" error and how to fix it.

React throws the "objects are not valid as a react child" error whenever you try to render an object or an array directly into your JSX code. React doesn’t allow this. It means that you tried to pass an invalid object in a React component.

Here’s what the error typically looks like.

Let’s quickly go through some examples that trigger the error:

Example 1: Passing an Object as a Child

import React from "react";
const App = () => {
  return <div>{{ msg: "Welcome to React!" }}</div>;
};
export default App;

Here, your App component tries to render an invalid child into JSX.  { msg: "Welcome to React!" } is a straight-up object, and you cannot just place an object directly into JSX.  As a result, you get the error.

Example 2: Passing Non-Serializable Object as a Child

import React from "react";
const myObj = { msg: "Welcome to React!" };
const App = () => {
  return <div>{myObj}</div>;
};
export default App;

Here, your App component tries to render a non-serializable object. This is again, an invalid child directly put into JSX, leading to the error.

Example 3: Passing Array as a Child

import React from "react";
const myData = [
  { id: 1, name: "Saul", age: 20 },
  { id: 2, name: "Peter", age: 30 },
  { id: 3, name: "Carrie", age: 40 },
];
const App = () => {
  return <div>{myData}</div>;
};
export default App;

Now, your App component tries to render an array directly as a child. Again, this is also not allowed in React and you get the error "objects are not valid as a react child".

You can fix the "objects are not valid as a react child" error in your React app using the following methods.

• Use dot notation to access properties for objects.
• Stringify the non-serializable object.
• Use the map() method to iterate through the array.

Note that these fixes are applied to the same code as used above in the post. Here’s how.

Fix 1: Passing an Object as a Child: Using Dot Notation

import React from "react";
const App = () => {
  return <div>{{ msg: "Welcome to React!" }.msg}</div>;
};
export default App;

Output

Using JavaScript Dot Notation to access properties from your object fixes the error.  As a result React happily avoids throwing the error.

Fix 2: Passing Non-Serializable Object as a Child: Using JSON.stringify()

import React from "react";
const myObj = { msg: "Welcome to React!" };
const App = () => {
  return <div>{JSON.stringify(myObj)}</div>;
};
export default App;

Output

Using JavaScript JSON.stringify() enables you to access the entire object by converting it to a string and then rendering it.  The "objects are not valid as a react child" error goes away with this one as well.

Pro Tip: Apart from valid React components, primitive values like strings and numbers can also be safely rendered as a child in JSX.

Also Read: ReactJS Suspense: Work Better With Async Data

Fix 3: Passing Array as a Child: Using the map() method

To fix this error while passing an array as a child, it’s important to remember that arrays are iterable in JavaScript, just like objects. You need to iterate over the array using the JavaScript map() method to get rid of this error.

Pro Tip: JavaScript considers arrays as a special type of object, which is why you get the error, even when the issue is with an array.

import React from "react";
const myData = [
  { id: 1, name: "Saul", age: 20 },
  { id: 2, name: "Peter", age: 30 },
  { id: 3, name: "Carrie", age: 40 },
];
const App = () => {
  return (
    <div>
      {myData.map((eachUser) => (
        <p key={eachUser.id}>
          {eachUser.name} is {eachUser.age} years old.
        </p>
      ))}
    </div>
  );
};
export default App;

Output

Here, you’re using the JavaScript map() method to iterate over the myData array. The key prop has unique values for each item. Thus, preventing the error.

Also Read: Chrome.//Net-Internals/#DNS: How to Clear DNS Cache on Chrome [Updated]

Apart from the above-mentioned examples, you may still find yourself stuck with the "objects are not valid as a react child" error in React. Here are some more examples with a solution to each.

• Example 1: When you try to render the Date() object directly in JSX, React will throw an exception:

import React from "react";
const App = () => {
  const date = new Date();
  return (
    <>
      <h3>{date.toLocaleDateString()}</h3>
    </>
  );
};
export default App;

Solution Explained: To get around this scenario, use the toLocaleDateString() with your Date object for React to render the component without the error.

Output:

• Example 2: You can do conditional rendering with type checking to avoid the error for a successful runtime in React.

import React from "react";
const myObj = { msg: "Welcome to React!" };
const App = () => {
  return <>{typeof myObj === "string" ? myObj : "Hello World!"}</>;
};
export default App;

Output:

Solution Explained: Here, you are rendering the string “Hello World!” conditionally. Since React does not allow Object rendering directly in JSX, the typeof myObj === "string" is evaluated first. Upon its failure, the later code runs.