Objects are not valid as a React child
An attempt was made to render a plain JavaScript object directly inside JSX.
Usually happens because:
- ☑ Rendering full API response object
- ☑ Direct rendering of Date objects
- ☑ Incorrect destructured variables
🔍 Quick Checklist:
📊 Where this usually happens (estimated occurrence)
What is Objects are not valid as a React child?
React can render strings, numbers, elements, and arrays of these values. However, it cannot render plain JavaScript objects (e.g. { name: 'John' }) directly inside JSX tags (like <h1>{user}</h1>). Doing so triggers this error because React doesn't know how to convert a complex object into DOM nodes.
Common Causes
- Rendering complete API response objects directly in text blocks.
- Failing to destructure objects correctly when printing values.
- Passing complex objects to components expecting strings.
Common Mistakes
- Trying to print Date objects directly (call `date.toLocaleDateString()` instead).
How to Fix
Framework-Specific Examples
No framework examples required for this informational status.
Wrong: Rendering Object directly
const user = { name: "John", age: 25 };
return <div>{user}</div>;Correct: Render Primitive Properties
const user = { name: "John", age: 25 };
return <div>{user.name} ({user.age})</div>;Best Practices
- Check data types and structure before inserting variables into JSX layout templates.
Frequently Asked Questions (FAQ)
Q: Can I render arrays?
Yes. React can render arrays of primitives or JSX elements natively. It only rejects plain objects.
Q: How do I debug which object is causing the issue?
Look at the React stack trace in your browser. It will highlight the component and render block that failed.
Q: Does this happen in production?
Yes. In production, this error is minified and reported as 'Minified React error #31'.
Q: How do I render a Date object?
Convert it to a string using methods like `date.toString()` or `date.toLocaleDateString()`.