Expressions in JSX

Curly braces drop a JavaScript expression into JSX.

An expression is something that produces a value: a variable, a sum, a function call, a ternary.

Show a value

The screen shows Hello, Ada.

If name later comes from props or state, the same JSX still works.

Do a little math

Call a function

What is not allowed

You cannot drop a statement like if or for directly in braces.

Use a ternary, &&, or compute a variable above the return.

Objects are not valid children

You can put a string or a number in braces. You cannot put a raw object.

Attributes also take braces

A string attribute can use quotes. A dynamic one uses braces.

width={48} is a number. width='48' would be a string. For DOM size, a number is nicer.

Tip: Braces mean JavaScript. Quotes mean a fixed string. Do not nest quotes when you meant braces.