Statements before the return, and text that stays text
The if lives above the return; inside the JSX there is only a variable and a ternary. The style uses double braces: JavaScript braces around an object. The comment's <b> is shown as characters: React escaped it to <b>.
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
Visitor says: <b>Nice</b> day!