Embedding Expressions in JSX
In this page:
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>- 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.
- 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.
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: