[Solved] Objects are not valid as a React child

I am facing the following error while Running my react Project. Objects are not valid as a React child in ReactJS. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Let’s Get Start with This Article.

How Objects are not valid as a React child Error Occurs?

I am facing the following error while Running my react Project.

Objects are not valid as a React child

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve Objects are not valid as a React child Error?

Solution 1: Use map() For an array

Objects are not valid as a React child Occurs whenever we are trying to render an object or an array directly. If You are trying to render an array then you have to use .map() method to render an array.

export default function App() {

  const users = [
    {userId: 1, userName: 'Ken'},
    {userId: 2, userName: 'David'},
    {userId: 3, userName: 'Ruth'},
  ];

  return (
    <div>
      {users.map((user, index) => {
        return (
          <div key={index}>
            <h2>user_id: {user.userId}</h2>
            <h2>user_name: {employee.userName}</h2>
            <hr />
          </div>
        );
      })}
    </div>
  );
}

Now, Your array rendered without any error, and your error is solved successfully Thanks.

Solution 2: For an Object

If You have an Object and You are trying to render an Object then Do something like This. You need to Use object.itskey and then you can render the object. Just Like This.

export default function App() {

  const obj = {
    userId: 1,
    userName: 'Ken',
  };

  return (
    <div>

      <div>
        <h2>user_id: {obj.userId}</h2>
        <h2>user_name: {obj.userName}</h2>
      </div>

      <hr />
    </div>
  );
}

Now, You have successfully rendered the Object and now, and your error is solved.

Solution 3: For String

If You are trying to render string then Use {} not {{}}. Here is my Example.

export default function App() {
  const msg = 'hello world';

  return (
    <div>
      <h4>{msg}</h4>
    </div>
  );
}

Now, your error must be resolved.

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• The useState set method not reflecting a change immediately
• The above error occurred in the component
• Argument type ‘unknown’ is not assignable parameter of type
• Cannot invoke an object which is possibly ‘undefined’
• Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop