JavaScript in JSX with curly braces

A card that reads its own data

In Writing markup with JSX, every tea card had its words typed straight into the tags: <h3>Green tea</h3>. A real shop keeps its teas as data: names, prices, and how many are left. To show data, JSX has curly braces, { }. Here is a card that reads three values. The result is live:

1const tea = "Green tea";2const price = 3;3const cups = 2;4 5export default function TeaCard() {6  return (7    <article className="tea-card">8      <h3>{tea}</h3>9      <p>{cups} cups cost ${price * cups}</p>10    </article>11  );12}

Lines 1 to 3 are ordinary JavaScript variables. Line 8 has braces around tea, so the heading shows the variable's value, Green tea, not the word "tea". Line 9 has two pairs of braces. The first shows cups, 2. The second works out price * cups, 3 times 2, and shows 6. The $ in front of it is plain text, like the word "cost". The result reads 2 cups cost $6.

Press Edit & run and change cups on line 3 to 3. The result says 3 cups cost $9: the braces are worked out again every time the component runs, from whatever the data is now.

Braces between tags show a value

Between tags, the braces can hold any expression, not only a variable: a sum, a method call, a property, an item from an array, or a call to your own function. This order summary uses each:

1const customer = "Asha";2const items = ["Green tea", "Lemon cake", "Iced tea"];3const total = 11.5;4 5function formatPrice(amount) {6  return "$" + amount.toFixed(2);7}8 9export default function OrderSummary() {10  return (11    <section>12      <h3>Thanks, {customer.toUpperCase()}!</h3>13      <p>You ordered {items.length} items.</p>14      <p>First up: {items[0]}</p>15      <p>Total: {formatPrice(total)}</p>16    </section>17  );18}

• Line 12 calls a string method: customer.toUpperCase() gives ASHA, so the heading reads Thanks, ASHA!.
• Line 13 reads a property: items.length is 3, so the paragraph reads You ordered 3 items.
• Line 14 reads the first item of the array: items[0] is Green tea.
• Line 15 calls formatPrice, the function on lines 5 to 7, which turns 11.5 into $11.50 with toFixed(2). Moving a long expression into a function keeps the markup easy to read.

Why does any expression work? Remember from Writing markup with JSX that every tag becomes a call to jsx(), with what's between the tags in children. Here is line 13 as TypeScript's compiler writes it:

jsxs("p", { children: ["You ordered ", items.length, " items."] });

The text and the braces became one array of children: the text "You ordered ", then the expression items.length exactly as you wrote it, then " items.". The braces simply drop your JavaScript into the call. So anything you could write as a value in an array can go in the braces, and React shows the value it gets.

But React can't show every value. Pick one below, and React renders it on this page between square brackets, which are plain text so you can see where the value goes:

1const value = "Green tea";2 3export default function Shelf() {4  return <p>[{value}]</p>;5}

Strings and numbers show. Even 0 and NaN show, because they're numbers. true, false, null, and undefined leave nothing, so the brackets stay empty: React skips them on purpose, which is what lets you write conditions in braces later. An array shows each item, one after another. A plain object stops React with an error.

Here is the object case in a real component, with its error on purpose:

1const tea = { name: "Green tea", price: 3 };2 3export default function TeaCard() {4  return <h3>{tea}</h3>;5}

Line 1 makes an object with two properties, and line 4 puts the whole object between the tags. The result shows React's error: Objects are not valid as a React child (found: object with keys {name, price}). A child is anything between a tag's opening and closing parts. React has no way to know whether you wanted the name, the price, or both. Press Edit & run and change {tea} to {tea.name}: the heading shows Green tea.

How to read this table: each row is one kind of value between the braces, what the page shows, and why.

Only an expression fits in the braces

JavaScript code comes in two kinds, as the Code structure lesson explains. An expression works out to a value: price * cups, tea.name, formatPrice(total). A statement does something but gives back no value: if, for, const total = 3. The braces need a value, so only an expression fits. Here is an if in the braces:

1const cupsLeft = 3;2 3export default function StockBadge() {4  return (5    <p>6      {if (cupsLeft > 0) { "In stock" } else { "Sold out" }}7    </p>8  );9}

Nothing renders. The result shows a syntax error, Unexpected token (6:8): line 6, at the if. Picture what the compiler would have to write, with the braces dropped into the call as they are:

jsx("p", {
  children: if (cupsLeft > 0) { "In stock" } else { "Sold out" },
});

Line 2 puts an if where a property's value goes. That's not JavaScript, any more than const label = if (…) is. There are two ways to fix it. Inside the braces, use an expression that makes the choice, the ternary operator condition ? a : b. Or make the choice with if before the return, store the result in a variable, and show the variable:

1const cupsLeft = 3;2 3export default function StockBadge() {4  let note = "";5  if (cupsLeft > 0 && cupsLeft < 5) {6    note = " Order soon!";7  }8 9  return (10    <p>11      {cupsLeft > 0 ? `${cupsLeft} cups left.` : "Sold out."}12      {note}13    </p>14  );15}

Line 11 is a ternary inside the braces: when cupsLeft > 0, it gives the template literal `${cupsLeft} cups left.`, and otherwise "Sold out.". Lines 4 to 7 are an ordinary if, above the return, where statements are fine: it sets note when only a few cups are left. Line 12 shows note. The result reads 3 cups left. Order soon!

Press Edit & run and set cupsLeft on line 1 to 0: Sold out., and the if leaves note empty. Set it to 20: 20 cups left., with no note. Loops work the same way: a for loop can't go in braces, but items.map(…) is an expression that gives back an array, which is how the Rendering lists lesson builds lists. Choosing between whole pieces of markup gets its own lesson too, Conditional rendering.

Braces as an attribute's value

Braces work in a second place: right after the = of an attribute, in place of the quotes. The attribute then gets the expression's value. This sign-up form takes four attributes from variables:

1const field = "email";2const hint = "you@example.com";3const maxLetters = 40;4const joined = false;5 6export default function JoinForm() {7  return (8    <form className={joined ? "join done" : "join"}>9      <label htmlFor={field}>Email</label>10      <input id={field} type="email" placeholder={hint} maxLength={maxLetters} />11      <button type="button" disabled={joined}>12        {joined ? "You're in" : "Join"}13      </button>14    </form>15  );16}

• Line 8: className gets a ternary. While joined is false, the form's class is join.
• Lines 9 and 10: htmlFor and id both read field, so the label and the box always match. Click Email in the result: the cursor jumps into the box.
• Line 10: placeholder gets the string in hint, the grey text in the empty box, and maxLength gets the number 40, so the box takes at most 40 letters.
• Line 11: disabled gets a boolean. false leaves the attribute off, so the button works.

Press Edit & run and set joined on line 4 to true. Three things change from one value: the class becomes join done, the button is disabled, and line 12 makes it say You're in.

Quotes and braces are easy to mix up. Here is the same name, hint, written three ways:

1const hint = "you@example.com";2 3export default function ThreeBoxes() {4  return (5    <>6      <input placeholder="hint" />7      <input placeholder="{hint}" />8      <input placeholder={hint} />9    </>10  );11}

The first box, line 6, says hint: quotes give the attribute exactly the text inside them. The second, line 7, says {hint}, braces and all: inside quotes, braces are ordinary characters. Only the third, line 8, shows you@example.com, the variable's value. The middle one is a common slip, and nothing warns you about it.

Use quotes for fixed text and braces for everything else. Braces matter most for values that aren't text. Here is false written both ways on a button:

1export default function OrderButtons() {2  return (3    <>4      <button disabled={false}>Order with braces</button>5      <button disabled="false">Order with quotes</button>6    </>7  );8}

Line 4 gives disabled the boolean false, so the first button works. Line 5 gives it the string "false", and a non-empty string counts as true, so the second button is disabled. Try clicking both. Press Edit & run to read React's warning in the console: Received the string `false` for the boolean attribute `disabled`. … Did you mean disabled={false}?

Braces go only in those two places: between tags, and right after an attribute's =. They can't make a tag name or an attribute name. This doesn't compile, because the compiler needs to read every tag's name as it is:

const tag = "h3";

<{tag}>Green tea</{tag}>

How to read this table: each row is one way to write an attribute's value, what the attribute gets, and when to use it.

Double curlies: a style object

In HTML, style takes a string of CSS. In JSX it takes an object, with one property per CSS declaration. An object literal has braces of its own, so when you write it right in the attribute, you get two pairs:

1export default function SaleBadge() {2  return (3    <p4      style={{5        display: "inline-block",6        backgroundColor: "#c2410c",7        color: "white",8        padding: 6,9        borderRadius: 4,10      }}11    >12      20% off green teas13    </p>14  );15}

Line 4 opens two braces. The outer one switches to JavaScript, as for any attribute. The inner one starts an object, which closes on line 10 with }}. Lines 5 to 9 are its properties. They're named in camelCase, like the element.style properties in plain JavaScript: backgroundColor on line 6 for CSS's background-color, borderRadius on line 9 for border-radius. Line 8 gives padding a plain number, 6, and React writes 6px.

Nothing about double curlies is special. Put the object in a variable, and you're back to single braces. This badge looks exactly the same:

1const badgeStyle = {2  display: "inline-block",3  backgroundColor: "#c2410c",4  color: "white",5  padding: 6,6  borderRadius: 4,7};8 9export default function SaleBadge() {10  return <p style={badgeStyle}>20% off green teas</p>;11}

Lines 1 to 7 make the object, and line 10 passes it with one pair of braces: style={badgeStyle}. Both badges get the same style attribute on the page.

A string of CSS, the HTML way, is an error on purpose here:

1export default function SaleBadge() {2  return <p style="color: #c2410c; padding: 6px">20% off green teas</p>;3}

React stops at line 2 and says so: The `style` prop expects a mapping from style properties to values, not a string. A mapping here means an object. Turn the string into {{ color: "#c2410c", padding: 6 }} with Edit & run, and the badge text appears.

Which numbers get px? Pick a style object below, and see the style attribute React really writes:

1export default function TeaName() {2  const style = { fontSize: 20 };3  return <p style={style}>Green tea</p>;4}

Sizes like fontSize and padding get px. Properties that have no unit in CSS, like lineHeight, opacity, and zIndex, keep the bare number. For any other unit, write a string: "1.25rem".

Most styling belongs in a CSS file, with className; the Styling components lesson compares the ways to style. A style object earns its place when a value comes from your data, like how full a loyalty card is:

1const stamps = 7;2const needed = 10;3 4export default function LoyaltyCard() {5  const percent = (stamps / needed) * 100;6 7  return (8    <section>9      <p>{stamps} of {needed} stamps. Your next tea is free at {needed}.</p>10      <div className="bar">11        <div className="fill" style={{ width: `${percent}%` }} />12      </div>13    </section>14  );15}

Line 5 works out the percent: 7 of 10 is 70. Line 11 sets only the width in a style object, with a template literal that makes "70%". The bar's fixed look, its height, colors, and rounded ends, sits in the styles.css tab under the class names on lines 10 and 11. Change stamps on line 1 to 9 and the bar grows to 90%.

A product card built from one object

In a real shop, product cards come from data, often one object per product from a server. Every part of this card that can change reads the product object, using each kind of braces from this lesson:

1const product = {2  name: "Jasmine green tea",3  price: 4.5,4  stock: 3,5  color: "#15803d",6  tags: ["green", "floral"],7};8 9export default function ProductCard() {10  const lowStock = product.stock < 5;11 12  return (13    <article className="product" style={{ borderLeftColor: product.color }}>14      <h3>{product.name}</h3>15      <p>${product.price.toFixed(2)} · {product.tags.join(", ")}</p>16      <p className={lowStock ? "stock low" : "stock"}>17        {lowStock ? `Only ${product.stock} left` : "In stock"}18      </p>19      <button aria-label={`Add ${product.name} to cart`} disabled={product.stock === 0}>20        Add to cart21      </button>22    </article>23  );24}

• Line 10 works out a value before the return: lowStock is true when fewer than 5 are left.
• Line 13 gets the border color from the data with a style object, borderLeftColor. The rest of the card's look is in the styles.css tab.
• Line 15 shows the price with two decimals, $4.50, and joins the tags into green, floral.
• Lines 16 and 17 pick a class and a message with two ternaries: with 3 left, the line says Only 3 left, in the low style.
• Line 19 builds the button's aria-label, what a screen reader says, from the name, and turns the button off at 0.

Press Edit & run and set stock on line 4 to 12: the line says In stock. Set it to 0: the button turns off, but the line says Only 0 left. Exercise 4 fixes that.

Common mix-ups

• "${price} in JSX is a template literal." No. Outside backticks, the $ is plain text and {price} is a pair of braces. That's why ${price} shows $3.
• "Anything can go in the braces." No. Only an expression, code that makes a value. if, for, and const are statements: put them above the return.
• "Quotes and braces do the same thing in an attribute." No. placeholder="{hint}" shows the text {hint}. Only placeholder={hint} reads the variable.
• "React shows false and null as words." No. It shows nothing for true, false, null, and undefined. But it does show 0 and NaN.
• "Double curlies are special JSX syntax." No. They're an object literal inside ordinary braces.
• "style takes CSS text, like in HTML." No. It takes an object with camelCase names; a string throws an error.
• "disabled="false" turns the attribute off." No. The string "false" turns it on. Write disabled={false}.

Practice exercises

Each exercise shows its result under the code, or when you press Edit & run. Change the code, and the result updates as you type. Try it yourself first, then use the hints.

const tea = "Iced tea";
const price = 4;
const cups = 3;

export default function TeaCard() {
  return (
    <article>
      <h3>{tea}</h3>
      <p>{cups} cups cost ${price * cups}</p>
    </article>
  );
}

1const tea = "Iced tea";2const price = 4;3const cups = 3;4 5export default function TeaCard() {6  return (7    <article>8      <h3>{tea}</h3>9      <p>{cups} cups cost ${price * cups}</p>10    </article>11  );12}

const tea = { name: "Oolong", price: 5 };

export default function TeaTitle() {
  return <h3>{tea}</h3>;
}

1const tea = { name: "Oolong", price: 5 };2 3export default function TeaTitle() {4  return <h3>{tea.name}: ${tea.price}</h3>;5}

1const count = 12;2 3export default function SearchBox() {4  return <input type="search" placeholder="Search {count} teas" />;5}

1const count = 12;2 3export default function SearchBox() {4  return <input type="search" placeholder={`Search ${count} teas`} />;5}

1const product = {2  name: "Jasmine green tea",3  price: 4.5,4  stock: 0,5  color: "#15803d",6  tags: ["green", "floral"],7};8 9export default function ProductCard() {10  const lowStock = product.stock < 5;11 12  return (13    <article className="product" style={{ borderLeftColor: product.color }}>14      <h3>{product.name}</h3>15      <p>${product.price.toFixed(2)} · {product.tags.join(", ")}</p>16      <p className={lowStock ? "stock low" : "stock"}>17        {lowStock ? `Only ${product.stock} left` : "In stock"}18      </p>19      <button aria-label={`Add ${product.name} to cart`} disabled={product.stock === 0}>20        Add to cart21      </button>22    </article>23  );24}

1const product = {2  name: "Jasmine green tea",3  price: 4.5,4  stock: 0,5  color: "#15803d",6  tags: ["green", "floral"],7};8 9export default function ProductCard() {10  const lowStock = product.stock < 5;11 12  return (13    <article className="product" style={{ borderLeftColor: product.color }}>14      <h3>{product.name}</h3>15      <p>${product.price.toFixed(2)} · {product.tags.join(", ")}</p>16      <p className={lowStock ? "stock low" : "stock"}>17        {product.stock === 0 ? "Sold out" : lowStock ? `Only ${product.stock} left` : "In stock"}18      </p>19      <button aria-label={`Add ${product.name} to cart`} disabled={product.stock === 0}>20        Add to cart21      </button>22    </article>23  );24}

1const stamps = 7;2const needed = 10;3 4export default function LoyaltyCard() {5  const percent = (stamps / needed) * 100;6 7  return (8    <section>9      <p>{stamps} of {needed} stamps. Your next tea is free at {needed}.</p>10      <div className="bar">11        <div className="fill" style={{ width: percent }} />12      </div>13    </section>14  );15}

1const stamps = 7;2const needed = 10;3 4export default function LoyaltyCard() {5  const percent = (stamps / needed) * 100;6 7  return (8    <section>9      <p>{stamps} of {needed} stamps. Your next tea is free at {needed}.</p>10      <div className="bar">11        <div className="fill" style={{ width: `${percent}%` }} />12      </div>13    </section>14  );15}

1const count = 1;2const total = 4.5;3 4export default function ReceiptLine() {5  return (6    <p>7      {count} items · ${total}8    </p>9  );10}

1const count = 1;2const total = 4.5;3 4export default function ReceiptLine() {5  return (6    <p>7      {count} {count === 1 ? "item" : "items"} · ${total.toFixed(2)}8    </p>9  );10}

Check your understanding

For each code question, find what's inside each pair of braces first, then work out its value. Press Edit & run on a question's code to check your answer.

Key takeaways

• Curly braces in JSX switch to JavaScript. React works out what's inside each time the component runs.
• Braces go in two places: between tags, to show a value, and right after an attribute's =, to set it.
• Only an expression fits, because the braces become a value in a jsx() call. Use a ternary in the braces, or an if before the return.
• Strings and numbers show, even 0. true, false, null, and undefined show nothing. Arrays show each item. Plain objects are an error.
• Quotes give an attribute fixed text; braces give it a value. style takes an object, so writing it in place gives double curlies, with camelCase names and px added to plain numbers on sizes.

Coming next: Passing props to a component. It uses these braces to give each component its own data, the way a menu page gives each tea card its own name and price.