Every kind of child, side by side
Strings, numbers, elements and arrays show up; null, undefined, true, false and "" leave the cell empty. NaN prints NaN, and React warns about it first (the first console line) because it's almost always a bug in a calculation.
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
Received NaN for the `children` attribute. If this is expected, cast the value to a string.
a string -> "Hello"
a number -> "42"
an element -> "<b>bold</b>"
an array -> "abc"
null -> ""
undefined -> ""
true -> ""
false -> ""
empty string -> ""
NaN -> "NaN"