Objects Are Not Valid as a React Child Error

Hello, folks this blog we are going to resolve the one widespread errors in react ‘Objects Are Not Valid as a React Child‘. So, after reading this blog you will be able to solve this issue. Most React developers might have seen this issue in React before. Although the error doesn’t make it clear what mistake was made by you, it states a clear rule:

Similarly, I was getting this error and it turned out to be that I was unintentional including an Object in my JSX code that I had expected to be a string value:

We are going to resolve this issue with some examples:

Case 1:

return (
    <BreadcrumbItem href={routeString}>
        {breadcrumbElement}
    </BreadcrumbItem>
)

breadcrumbElement used to be a string but due to a refactor had evolved into an Object. Unfortunately, React’s error message didn’t do a good job of pointing me to the line where the problem existed. I had to follow my heap trace all the way back up until I identified the “props” being passed into a component and then I found the offending code.

You’ll need to either consider a property of the object that is a string value or transforms the Object into a string representation that is desirable. One option might be JSON.stringify if you really like to see the contents of the Object.

Case 2:

Error: Objects Are Not Valid as a React Child

So I got this error when trying to display the created At property which is a Date object. If you connect .toString() At the end like this, it will do the modification and eliminate the error. Just publishing this as a possible answer in case anyone else flew into the same problem:

You might like this:

• Detect Browser in JavaScript.
• Snake JavaScript
• Personal Portfolio Website
• Age Calculator in JavaScript
• Add to Cart Button HTML

{this.props.task.createdAt.toString()}

Case 3:

Similarly, if you get this error due to your different mistake, Then remove double braces like below:

{{count}}

to insert the value of count instead of the correct:

{count}

which the compiler probably turned into {{count: count}}, i.e. trying to insert an Object as a React child.

Case 4:

The error “Objects are not valid as a React child” is rather common and the solution is to manipulate the object so that it becomes a valid element. Consider the following code:

Just considered adding to this as I had the same problem today, turns out that it was because I was returning just the function when I wrapped it in a <div> tag it started working, as below,

renderGallery() {
  const gallerySection = galleries.map((gallery, i) => {
    return (
      <div>
        ...
      </div>
    );
  });
  return (
    {gallerySection}
  );
}

The above caused the error. I fixed the problem by changing the return() section to:

return (
  <div>
    {gallerySection}
  </div>
);

…or simply:

return gallerySection

React Children

Uncaught Error: Objects Are Not Valid as a React Child Error [ Solution is above ]

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }