Putting Values Into Markup

What this is. Curly braces switch out of markup and back into JavaScript. Anything that produces a value can go inside them.

The rule that catches people. Braces take an expression, which is something that has a value. They do not take a statement, which is something that performs an action.

{name} works. {count * 40} works. {if (x) ...} does not, because an if statement is not a value. Use a ternary, or calculate it above the return and put the variable in.

✦ What renders and what does not

Strings, numbers and arrays render. null, undefined, false and true render as nothing, which is genuinely useful. Objects throw: "Objects are not valid as a React child" almost always means you wrote {user} where you meant {user.name}.