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 directly.

The Wrong Code ❌

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

  // ❌ CRASH: You cannot render 'user' directly
  return (
    <div>
      {user} 
    </div>
  );
};
            

The Solution ✅

To fix this, access specific properties like user.name.

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

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

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