jsschools
Expressions in JSX

Anything That Returns a Value Goes Between Curly Braces

Expressions in JSX

Inside JSX you can drop any JavaScript expression — variables, math, function calls, ternaries, even arrays of elements.

4 min read Level 1/5 #react#jsx#expressions
What you'll learn
  • Interpolate variables and function calls inside JSX
  • Render conditionally with `&&` and ternaries
  • Render lists by mapping arrays to elements

Anything inside { } in JSX must be a JavaScript expression — something that evaluates to a value. No if, no for, no statements. (But you can do almost everything else.)

Variables and Math

const name = "Ada";
const year = 2026;

function Banner() {
  return <h1>Hello {name}, the year is {year + 1}.</h1>;
}

Function Calls

function format(n) { return n.toFixed(2); }

function Price() {
  return <p>${format(9.999)}</p>;   // "$10.00"
}

Conditionals With &&

a && b returns a if a is falsy, otherwise b. Useful for “show this when condition is true”:

function Inbox({ count }) {
  return (
    <div>
      <h1>Inbox</h1>
      {count > 0 && <span className="badge">{count}</span>}
    </div>
  );
}

Either/Or With Ternary

function Status({ ok }) {
  return (
    <p>{ok ? "All good ✅" : "Something broke ❌"}</p>
  );
}

Picking a Component Conditionally

The expression on either side of ? can be JSX:

function Page({ user }) {
  return user ? <Dashboard user={user} /> : <Login />;
}

Rendering a List With .map()

Most lists in React come from .map:

function Tags({ tags }) {
  return (
    <ul>
      {tags.map(tag => (
        <li key={tag}>{tag}</li>
      ))}
    </ul>
  );
}

<Tags tags={["js", "react", "frontend"]} />

That key={tag} is required by React when rendering lists — you’ll get a full lesson on keys later.

Multiple Expressions Side by Side

function User({ user }) {
  return (
    <div>
      <strong>{user.name}</strong> ({user.email})
      {user.admin && <span className="badge">admin</span>}
    </div>
  );
}

What Renders As Nothing

React renders these as nothing:

ValueRendered as
nullnothing
undefinednothing
falsenothing
truenothing
Empty stringempty text node

This is why {cond && <Thing />} works — when cond is false, nothing renders.

What DOESN’T Work

You can’t use statements inside { }:

// ✗ if is a statement, not an expression
<div>{ if (ok) { return "yes"; } }</div>

// ✓ Ternary is an expression
<div>{ ok ? "yes" : "no" }</div>

// ✓ Or extract before the JSX
let label = "no";
if (ok) label = "yes";
return <div>{label}</div>;

Up Next

A side-by-side cheat sheet of JSX vs HTML so the differences sink in.

JSX vs HTML →