JSX
Expressions in JSX
Written by Swapnil RajaPublished
Curly braces switch from markup back to JavaScript. Anything that produces a value is allowed; anything that does not is a syntax error.
Expressions, not statements
An expression produces a value: 2 + 2, user.name, items.map(...), a ternary. A statement does something: if, for, const. Only expressions go inside braces.
What fits in braces
jsx
function Demo() {
const user = { name: "Ada", visits: 3 }
const items = ["one", "two"]
return (
<div>
<p>Maths: {2 + 2}</p>
<p>Property: {user.name}</p>
<p>Call: {user.name.toUpperCase()}</p>
<p>Ternary: {user.visits > 1 ? "Returning" : "First time"}</p>
<p>Template: {`${user.name} has ${user.visits} visits`}</p>
<ul>{items.map((item) => <li key={item}>{item}</li>)}</ul>
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Demo />)