Expressions

Learn JavaScript expressions in JSX with {}.

Expressions in curly braces

In JSX, you use curly braces { } to embed a JavaScript expression. For example, <Text>Hello, {name}</Text> inserts the value of the name variable into the text.

Inside the braces you can put any expression: a variable, an arithmetic operation, array access, a function call. For instance, <Text>{1 + 2}</Text> prints 3.

However, statements like if do not work inside braces; you use a ternary instead.

Operations and functions

Curly braces do more than hold variables; they compute. With <Text>{price * 1.18}</Text> you can show a price including tax.

You can also embed a function result: <Text>{getLabel()}</Text>. The value returned by the function is displayed.

Array and object access also work: <Text>{user.name}</Text>. This flexibility makes JSX powerful.

Exercise Embed an expression

Write an App component. Define a variable called userName (e.g. const userName = 'Alex';). Inside a <Text> use curly braces to concatenate Hello, and the userName value.

Show example solution

const userName = 'Alex';

function App() {
  return (
    <Text>Hello, {userName}</Text>
  );
}

Test yourself

Embed a variable

<Text>Hello, ____</Text>

Show answer

<Text>Hello, {userName}</Text>

What does {user.name} do?
```
<Text>{user.name}</Text>
```
- Prints the full content of the user variable
- Declares a new variable called name
- Prints the value of the name property of the user object
- Assigns the name variable to user
Show answer

Prints the value of the name property of the user object — The dot accesses a property of the object.
Match the expression types

{name}

Variable
{1 + 2}

Operation
{user.age}

Property
{getLabel()}

Function

Next lesson: Component tree

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies