Embedding JavaScript Expressions in JSX

Runnable lesson · press Try it on the examples to edit and run them here.

The curly braces in JSX are a bridge from markup to JavaScript. This lesson shows what fits through that bridge and what does not.

An expression produces a value

If you can put it on the right side of const x =, it is an expression and it works in braces:

• Variables and properties: {user.name}
• Arithmetic and string joins: {price * quantity}, {first + " " + last}
• Function calls: {formatPrice(price)}
• Template literals (a string in backticks with ${name} inside)
• Ternaries and logical operators: {isAdmin ? "Admin" : "User"}
• Array methods that return arrays or elements: {items.map(...)}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function formatPrice(value) {
  return "$" + value.toFixed(2);
}

function App() {
  const price = 15;
  const quantity = 3;
  const name = "Ada";

  return (
    <div>
      <p>{`Hello ${name}`}</p>
      <p>Total: {formatPrice(price * quantity)}</p>
      <p>{quantity > 2 ? "Bulk order" : "Small order"}</p>
    </div>
  );
}

A statement does not work

if, for, switch and variable declarations do not produce a value, so they are not allowed in the braces:

1
2

// Does not work
<p>{if (loggedIn) { "Welcome" }}</p>

Instead use one of these three tools:

1. A ternary or && inside the JSX

1

<p>{loggedIn ? "Welcome" : "Please sign in"}</p>

2. Compute a value before return (best when the logic is longer)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function App() {
  const score = 72;

  let status;
  if (score >= 90) {
    status = "Excellent";
  } else if (score >= 70) {
    status = "Almost there";
  } else {
    status = "Keep practising";
  }

  return <p>Status: {status}</p>;
}

3. A helper function

1
2
3
4
5
6
7
8
9

function gradeFor(score) {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
  return "C";
}

function App() {
  return <p>Grade: {gradeFor(85)}</p>;
}

Double braces are not special

style={{ color: "red" }} looks odd, but it is just two ordinary things: the outer braces open JavaScript, and the inner { color: "red" } is an object literal. The same happens with any object: <Chart options={{ legend: false }} />.

Where braces can appear

Braces work in two places:

1. As children, between the tags: <p>{value}</p>
2. As an attribute value, after the =: <img src={url} />

They do not work as an attribute name or as a tag name. To choose a tag dynamically, store the component in a capitalised variable:

1
2
3
4
5

function App() {
  const level = 2;
  const Tag = "h" + level; // capitalised variable that holds the tag name
  return <Tag>Heading level {level}</Tag>;
}

Key points

• Braces accept any expression; statements are not allowed.
• Use a ternary, &&, a variable computed before return, or a helper function for logic.
• Double braces are just braces plus an object.