Expressions and curly braces

Learn to put variables and expressions inside curly braces.

Expressions and curly braces

The strongest side of JSX is that you can put any JavaScript expression inside curly braces { }. Writing {name} makes React put the value of name there.

Inside the braces you can also use a function call, a math operation or a logical expression: { 5 + 3 } or { format(date) }.

Expressions must be a single line: statements like if cannot go inside braces; use the ternary operator cond ? a : b instead.

Nested expressions

You can even put JSX inside curly braces. For example, <main>{ isLoggedIn && <Avatar /> }</main> shows an avatar only when the user is logged in.

Array methods also work inside braces: <ul>{ items.map(i => <li>{i}</li>) }</ul> turns an array into list items. We'll explore this in the list rendering lesson.

If the expression inside the braces returns null, false or undefined, React renders nothing — handy for conditional rendering.

Exercise Show a numeric expression

Complete the skeleton. Write a component called Total that shows the result of 10 + 5 inside a  using curly braces, and export it.

Show example solution

function Total() {
  return <p>{10 + 5}</p>;
}

export default Total;

Test yourself

Insert an expression
```
Hello ____
```
Show answer
```
Hello {name}
```
Which can go inside curly braces?
- { if (x) 1 }
- { 5 + 3 }
- { for (i=0; i<3; i++) }
- { return 5; }
Show answer

{ 5 + 3 } — 5 + 3 is an expression; if, for and return are statements.
Match the expression examples

{name}

Variable
{ 5 + 3 }

Math
{ format(d) }

Call
{ a && b }

Logic

Next lesson: Attributes and className

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies