The ternary operator, condition ? valueIfTrue : valueIfFalse, is the standard way to choose between two different JSX outputs directly inline within JSX curly braces.

Syntax

{condition ? <A /> : <B />}

Deep Dive Course

Because the ternary operator is itself a single JavaScript expression, evaluating to exactly one of its two branches depending on the condition, it fits naturally inside JSX's curly braces, unlike an if/else statement — this makes it the idiomatic choice for a straightforward two-way conditional directly inline within markup, like showing one message or another, or rendering a component with slightly different props based on a condition. It becomes noticeably harder to read once nested more than one level deep, at which point extracting the logic into a variable with if/else, or a small helper function, is usually the clearer choice.

1Understanding Conditional Rendering with Ternary Operator

💡

Avoid nesting ternaries more than one level deep directly inside JSX — condition1 ? x : condition2 ? y : z quickly becomes hard to parse correctly at a glance — extract that logic into a variable computed with if/else beforehand once it grows past a single, simple two-way choice.

editor.html

function Greeting({ isLoggedIn }) {
  return <p>{isLoggedIn ? 'Welcome back!' : 'Please sign in.'}</p>;
}

localhost:3000

2Practical Example

Here is a real-world application of Conditional Rendering with Ternary Operator showing how it is used in production React code.

editor.html

function StatusBadge({ status }) {
  return (
    <span className={status === 'active' ? 'badge-green' : 'badge-gray'}>
      {status}
    </span>
  );
}

localhost:3000

3Best Practices

Follow these guidelines when working with Conditional Rendering with Ternary Operator:

1. Use a ternary for a simple, single-level two-way choice directly inline in JSX, like {isLoggedIn ? <Dashboard /> : <LoginForm />}

2. Avoid nesting multiple ternaries inside each other directly in JSX, since it quickly becomes difficult to read correctly — switch to if/else assigning a variable instead

3. Keep each branch of a ternary reasonably short and simple; extract a longer branch into its own small component or variable rather than writing a large, complex expression inline

⚠️

Tip: Avoid nesting ternaries more than one level deep directly inside JSX — condition1 ? x : condition2 ? y : z quickly becomes hard to parse correctly at a glance — extract that logic into a variable computed with if/else beforehand once it grows past a single, simple two-way choice.

editor.html

function Greeting({ isLoggedIn }) {
  return <p>{isLoggedIn ? 'Welcome back!' : 'Please sign in.'}</p>;
}

localhost:3000

Examples

Example 01Basic Usage

function Greeting({ isLoggedIn }) {
  return <p>{isLoggedIn ? 'Welcome back!' : 'Please sign in.'}</p>;
}

Example 02Advanced Example

function StatusBadge({ status }) {
  return (
    <span className={status === 'active' ? 'badge-green' : 'badge-gray'}>
      {status}
    </span>
  );
}

Best Practices

Use a ternary for a simple, single-level two-way choice directly inline in JSX, like {isLoggedIn ? : }
Avoid nesting multiple ternaries inside each other directly in JSX, since it quickly becomes difficult to read correctly — switch to if/else assigning a variable instead
Keep each branch of a ternary reasonably short and simple; extract a longer branch into its own small component or variable rather than writing a large, complex expression inline

Interview Question

Why does the ternary operator work directly inside JSX curly braces, while an equivalent if/else statement doesn't?▼

Hint: Think about whether the ternary, unlike if/else, actually evaluates to a single value that can be substituted into an expression position.

The ternary operator is fundamentally an expression, condition ? a : b evaluates to exactly one single value, either a or b, depending on the condition, which is exactly the kind of thing JSX curly braces are designed to hold, since each {...} compiles into a value passed as an argument to the underlying createElement()-style function call. An if/else construct, by contrast, is a statement that controls which block of code executes, but doesn't itself evaluate to any value that could be substituted into that same argument-value position. This distinction, expression versus statement, is precisely why the ternary slots naturally into inline JSX for a simple two-way choice, while if/else logic has to be computed separately, outside the JSX, before the result is referenced inside it.

Exercises

MediumPractice using Conditional Rendering with Ternary Operator in a real scenario.

View Solution

function Greeting({ isLoggedIn }) {
  return <p>{isLoggedIn ? 'Welcome back!' : 'Please sign in.'}</p>;
}

Frequently Asked Questions

Why does the ternary operator work directly inside JSX curly braces, while an equivalent if/else statement doesn't?▼

Related Functions

conditional-rendering-with-if-elselogical-operator-andconditional-component-rendering