An object as a child crashes the render
The page stays blank and React explains why: it found an object with keys name and city. Fix it by writing {user.name} (or {user.name} from {user.city}).
Inside JSX, strings and numbers become text, elements become DOM, arrays render each item, and null, undefined, true and false render nothing; but 0 renders as "0", and plain objects crash with "Objects are not valid as a React child".
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a Cart component with a count prop that shows Cart plus a badge with the number only when count is above 0. Test it with 0 and 5.
Given const order = { id: 7, total: 450 }, render Order #7: ₹450 without crashing.
Explain it without notes
Which values render as nothing in JSX, and why is that useful?
Explain the 0 && bug and three ways to fix it.
What does "Objects are not valid as a React child" mean, and how do you fix it?
What's the difference between {Hello} and <Hello />?
Preview
Console
Nothing logged yet.Expected console output
Uncaught Error: Objects are not valid as a React child (found: object with keys {name, city}). If you meant to render a collection of children, use an array instead.
An error occurred in the <p> component.
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.