The `0 &&` gotcha and its fix
The second buggy row prints Inbox0: 0 && … evaluates to 0, and React shows numbers. count > 0 is a real boolean, so the fixed row shows nothing when the count is zero.
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
"Inbox3"
"Inbox0"
"Inbox3"
"Inbox"