Variables, calls, ternaries and template literals
Every blank is an expression: a variable (fullName), a function call (formatPoints), arithmetic (Math.floor(...) + 1), template literals in attributes and a ternary for the label. Change points to 400 and watch the level, the label and the class follow.
Curly braces { } open a window from JSX back into JavaScript: inside them you can put any expression (a variable, a calculation, a function call, a ternary, a template literal), as text or as an attribute value, but not a statement such as if or for.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Given const item = { name: "Pen", price: 20, qty: 3 }, render Pen × 3 = ₹60 using braces and a calculation.
Render a <p> whose class is "open" when const isOpen = true and "closed" otherwise, and whose text says We are open or Sorry, closed.
Explain it without notes
What can you put inside curly braces in JSX, and what can't you?
Where in JSX can curly braces appear?
Why does style={{ color: "red" }} have two pairs of braces?
Why is rendering a user's comment with {comment} safe?
Preview
Console
Nothing logged yet.Expected console output
Photo of Asha Rao
1,250 pts · level 3
status gold