Error: Objects are not valid as a React child (found: object with keys {name, email}).
If you meant to render a collection of children, use an array instead.

You’re trying to render a plain JavaScript object directly in JSX. React can render strings, numbers, arrays, and other components — but not objects.

Fix 1: You’re Rendering an Object Instead of a Property

// ❌ Rendering the whole object
function UserCard({ user }) {
  return <p>{user}</p>;
}

// ✅ Render specific properties
function UserCard({ user }) {
  return <p>{user.name}</p>;
}

Fix 2: Date Object

// ❌ Date is an object
<p>{new Date()}</p>

// ✅ Convert to string
<p>{new Date().toLocaleDateString()}</p>
<p>{new Date().toISOString()}</p>

Fix 3: API Response Not Parsed

// ❌ response is the Response object, not the data
const response = await fetch('/api/users');
setUsers(response);

// ✅ Parse the JSON first
const response = await fetch('/api/users');
const data = await response.json();
setUsers(data);

Fix 4: Rendering an Array of Objects

// ❌ Can't render array of objects directly
const users = [{name: "Alice"}, {name: "Bob"}];
return <div>{users}</div>;

// ✅ Map to JSX
return (
  <div>
    {users.map(user => (
      <p key={user.name}>{user.name}</p>
    ))}
  </div>
);

Fix 5: JSON.stringify for Debugging

If you just want to see the object for debugging:

<pre>{JSON.stringify(data, null, 2)}</pre>

Quick Diagnosis

Add a console.log before the return to see what you’re actually rendering:

function MyComponent({ data }) {
  console.log('data is:', typeof data, data);
  return <p>{data}</p>;
}

If typeof data is "object", that’s your problem. Access a specific property or convert it to a string.