Embedding Expressions in JSX
Curly braces in JSX are like little windows that let real JavaScript values peek through into your markup.
In this page:
Syntax
function ComponentName() {
const variable = value;
return <element>{variable}</element>; // any JS expression in { }
}
<element>{functionName(argument)}</element>Embedding JavaScript with Curly Braces
Any JavaScript expression can be inserted into JSX by wrapping it in curly braces {} -- variables, function calls, arithmetic, and more.
Note:
Curly braces work anywhere in JSX: inside text content, or as an attribute value.
Warning:
Curly braces only accept expressions (things that produce a value) -- statements like if or for cannot go directly inside {}.
Example: Embedding JavaScript with Curly Braces
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Sum() {
const a = 4;
const b = 5;
return <p>{a} + {b} = {a + b}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Sum />);
</script>
</body>
</html>Using Variables Inside JSX
A variable defined in your component function can be referenced directly inside the returned JSX using {variableName}.
Note:
Compute a value into a well-named variable first, then reference that variable in JSX -- it keeps the JSX readable.
Warning:
Referencing a variable that doesn't exist yet (a typo in the name) causes a ReferenceError when the component renders.
Example: Using Variables Inside JSX
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Greeting() {
const name = 'Asha';
return <p>Hello, {name}!</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Greeting />);
</script>
</body>
</html>Calling Functions Inside JSX
You can call a function directly inside curly braces, and its return value is inserted into the output -- useful for formatting values right where they're displayed.
Note:
Keep functions called inline in JSX small and fast, since they run on every render.
Warning:
Calling a function that returns undefined (nothing) renders nothing visible, which can look like a bug in the JSX when the real cause is the function itself.
Example: Calling Functions Inside JSX
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function formatPrice(cents) {
return '$' + (cents / 100).toFixed(2);
}
function Price() {
return <p>Price: {formatPrice(1999)}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Price />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Trying to embed a JavaScript statement (like an if block) directly inside JSX curly braces -- only expressions work there.
- Forgetting that objects can't be rendered directly as JSX children -- you'll get an error.
- Using curly braces around an entire JSX block instead of just the dynamic value.
Chapter Summary
- Curly braces
{}embed JavaScript expressions inside JSX. - Any valid expression works: variables, function calls, arithmetic, ternaries.
- Statements like if/for do not work directly inside
{}-- use expressions instead. - Rendering a plain object throws an error; render its properties instead.
Browser Support
No browser-specific restrictions -- this is a JSX/Babel compilation-time feature.
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: