ReactJSXJavaScript
React can render strings, numbers, and elements — but not plain objects. When you accidentally drop an object into JSX, you get this error, often with a helpful hint about which keys it found.
The 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.
Cause 1: Rendering the Whole Object
jsx
// ❌ user is an object
return <p>{user}</p>;
// ✅ Render a specific field
return <p>{user.name}</p>;Cause 2: Rendering a Promise (Forgot await)
If the 'object' has no readable keys, you are probably rendering a Promise. In a Server Component, await it; in a Client Component, resolve it into state first.
tsx
// ✅ Server Component
export default async function Page() {
const user = await getUser();
return <p>{user.name}</p>;
}Cause 3: Rendering a Date or Error Object
jsx
// ❌ Date is an object
<span>{order.createdAt}</span>
// ✅ Convert to a string
<span>{new Date(order.createdAt).toLocaleDateString()}</span>
// Error objects → render the message
<p>{error.message}</p>Debugging Tip
Read the keys in the error message — they tell you exactly which object you leaked into JSX. Then pick the one field you actually wanted to show.
