How to fix "Objects are not valid as a React child" error

If you are getting the error "Objects are not valid as a React child", it means you are trying to render an object (or an array of objects) directly inside your JSX.

React doesn't know how to display a raw JavaScript object on the screen. It can only display strings, numbers, or other React components.

The Wrong Code ❌

Here is an example of what causes the error:

const App = () => {
  const user = { name: "Vish", age: 25 };

  // ❌ CRASH: You cannot render 'user' directly because it's an object
  return (
    <div>
      {user} 
    </div>
  );
};
            

The Solution ✅

To fix this, you need to access the specific properties of the object, like user.name.

const App = () => {
  const user = { name: "Vish", age: 25 };

  // ✅ CORRECT: Render specific properties
  return (
    <div>
      User Name: {user.name} 
      <br />
      User Age: {user.age}
    </div>
  );
};
            

Debugging with JSON.stringify

If you want to debug and see what is inside the object quickly, use JSON.stringify():

<div>
  {JSON.stringify(user)}
</div>
            

Did this fix your issue? Check out more React solutions in the sidebar.