react · source-driven
Displaying data
Curly braces escape from JSX back into JavaScript so you can show variables and expressions.
Official docs: react.dev/learn — Displaying data
You will learn
- How to embed values with { }
- How attributes take { expression } instead of quotes when dynamic
- That style={{ }} is a JS object inside JSX braces
Escape into JavaScript with curly braces
return (
<h1>
{user.name}
</h1>
);Quotes pass a string literal. Braces pass a JavaScript value — same distinction as Nest template strings vs plain strings, but in JSX attributes.
<img
className="avatar"
src={user.imageUrl}
alt={'Photo of ' + user.name}
style={{ width: user.imageSize, height: user.imageSize }}
/>Live — same idea as the docs’ Profile example
Hedy Lamarr
Recap
- { } embeds JavaScript inside JSX
- Dynamic attributes use braces, not quotes
- style takes a camelCased object
Challenge
Try this
Add a line that shows user.name.toUpperCase() using braces. Any JS expression is fair game inside { }.