Expressions in JSX
Use curly braces to embed any JavaScript expression inside JSX.
Syntax
<p>Total: {price * quantity}</p>Inside JSX you can drop into JavaScript at any point using curly braces { }. Whatever expression you put there is evaluated and its result is rendered.
What you can put in braces
- Variables:
{name} - Math and expressions:
{price * qty} - Function calls:
{formatDate(today)}
You cannot put statements (like if or for) inside braces — only expressions that produce a value.
Example
function Greeting() {
const name = 'Ada';
const hour = new Date().getHours();
return (
<p>
Hello {name}, it is {hour}:00.
{' '}You have {2 + 3} new messages.
</p>
);
}When to use it
- A stock ticker component embeds a live price variable inside JSX curly braces so the rendered number updates automatically each time state changes.
- A localisation system injects translated strings through JSX expressions so the component always displays the correct language without JSX rewrites.
- A permission-aware UI calls a helper function inside curly braces to decide which action label to display based on the current user's role.
More examples
Embed variables in JSX
Shows variables and arithmetic expressions rendered directly inside JSX via curly braces.
function Profile({ name, score }) {
return (
<div>
<h2>{name}</h2>
<p>Score: {score * 10}</p>
</div>
);
}Call a function inside JSX
Demonstrates calling a helper function within curly braces to transform data before it appears in the UI.
function formatDate(ts) {
return new Date(ts).toLocaleDateString();
}
function Post({ title, createdAt }) {
return (
<article>
<h3>{title}</h3>
<time>{formatDate(createdAt)}</time>
</article>
);
}Dynamic className with expression
Uses template-literal and ternary expressions inside curly braces to generate dynamic class names and ARIA labels.
function StatusBadge({ status }) {
const color = status === 'active' ? 'green' : 'red';
return (
<span
className={`badge badge--${color}`}
aria-label={`Status: ${status}`}
>
{status.toUpperCase()}
</span>
);
}
Discussion