Ternary operator

Learn to write short conditional rendering with condition ? a : b.

Ternary operator

The ternary operator takes the form condition ? trueValue : falseValue. It's used inside JSX with curly braces: { 'count > 0 ? <Full /> : <Empty />' }.

Ternary is the shortest way to choose between two options. It can nest, but limiting nesting is good practice for readability.

Because it returns a value, it can go directly inside curly braces; it doesn't need an extra line like an if statement.

Ternary vs if

Ternary is an expression: it returns a value and can be used inside curly braces. if is a statement: it returns nothing and can't go inside curly braces.

That's why ternary is preferred for conditional rendering inside JSX. if can only be used in the component body, outside the return.

When two nested conditions are needed, a helper variable or early return may read better than ternary.

Exercise Label by stock state

Complete the skeleton. Write a component called StockLabel that takes ({ '{ count }' }) as parameter. If count is greater than 0, return <p>In stock</p>; otherwise <p>Out of stock</p> (with ternary). Don't forget to export.

Show example solution

function StockLabel({ count }) {
  return count > 0 ? <p>In stock</p> : <p>Out of stock</p>;
}

export default StockLabel;

Test yourself

How many values does the ternary return?
- One
- Two
- Three
- Zero
Show answer

Two — Ternary returns one of two values.

Ternary syntax

Ternary starts with the ____ mark.

Show answer

Ternary starts with the ? mark.

Match the ternary parts

condition

Before the question mark
?

Question mark
trueValue

First value
falseValue

Second value

Next lesson: Logical AND (&&)

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies