How to Render Variables and Expressions in JSX

To render variables in JSX, wrap each JavaScript value in curly braces. The braces switch the compiler from markup back into JavaScript, so a name, a number, or a function call can produce text inside a tag. This is how a component stops being static and starts showing live data.

Here is the simplest case: a variable rendered inside a heading.

App.jsx

function Profile() {
  const name = "Maya";
 
  return <h1>{name}</h1>;
}

The braces replace the name reference with the string "Maya," so the page shows a heading that says "Maya." Without the braces, JSX would render the literal text "name" instead. The same mechanism powers every dynamic piece of a React screen.

Curly braces are a window into JavaScript

Inside a JSX tag, text is normally treated as a string. The braces change that rule for the expression they wrap. This is the core JSX idea: markup describes the shape, and JavaScript fills in the changing parts.

Once you see the braces as a boundary, JSX reads like JavaScript instead of a separate language.

You can put any JavaScript expression between the braces: a variable, an arithmetic result, a template literal, or a function call. You cannot put a statement there, because a statement does not produce a value.

App.jsx

function Total() {
  const items = 4;
  const price = 9;
 
  return <p>Your total is {items * price}.</p>;
}

The page shows "Your total is 36." React evaluates items times price and renders the resulting number. This is also why an expression works while an if statement does not.

Curly braces work in two places: as text content inside a tag, and as an attribute value right after the equals sign. Both spots read JavaScript. A value wrapped in quotes stays a literal string, so an attribute without braces is static.

Function calls and object properties

Expressions include function calls, which keeps the markup readable when the value needs a little formatting first. Formatting a price or a date inside the markup gets noisy fast, so a named function keeps the intent clear.

App.jsx

function Profile({ user }) {
  return (
    <p>
      {user.name} has {user.posts.length} posts.
    </p>
  );
}

The paragraph combines two object properties with plain text. The visible result depends on the user prop, so the same component renders a different sentence for different data.

A function call works the same way, as long as it returns a string or number. Moving the math into a function keeps the JSX readable:

App.jsx

function formatPrice(cents) {
  return "$" + (cents / 100).toFixed(2);
}
 
function Price() {
  return <p>Total: {formatPrice(1499)}</p>;
}

The page shows "Total: $14.99." React calls the function during rendering and prints whatever it returns. The same trick applies to any function that turns raw data into display text.

Inline styles use two sets of braces

An object is also an expression, but rendering a whole object throws an error. React does not know how to display an object as text. For inline styles, the object is passed to the style prop instead of being rendered directly.

App.jsx

<button style={{ backgroundColor: "crimson", color: "white" }}>
  Delete
</button>

The outer braces open the JavaScript expression, and the inner braces are the style object itself. The button renders with a crimson background and white text.

Property names use camelCase, so background-color becomes backgroundColor. For a fuller look at styles and attributes, see the guide on adding attributes and inline styles in JSX.

Statements do not belong in braces

Three things fail between the braces. Statements do not produce a value, so if and for must live outside the JSX.

A whole object cannot render, so read a property such as user.name. A value that resolves to null or undefined renders nothing at all. That last behavior is useful: a missing value quietly disappears instead of breaking the page.

When you need a decision inside the markup, use a ternary expression instead of an if statement. It reads naturally inside braces because it always evaluates to a single value.

The guide on conditional rendering in React shows all six patterns. When you need many values at once, the guide on rendering lists with map covers that next step.