Conditional rendering with if/else means computing which JSX to return, or which variable to render, using a regular if/else statement outside the JSX itself, since JSX can't contain a statement directly.

Syntax

let content;
if (condition) {
  content = <A />;
} else {
  content = <B />;
}
return <div>{content}</div>;

Deep Dive Course

Because JSX curly braces can only hold expressions, not statements, an if/else block can't be written directly inline inside JSX the way a ternary or logical && can — instead, the if/else logic runs earlier in the component's function body, assigning the JSX to render into a variable, or an early return statement returns entirely different JSX before the rest of the component even runs. This approach tends to be the clearest, most readable choice specifically when the conditional logic itself is non-trivial, involving several branches or conditions, since forcing complex branching into a single inline ternary or && expression can quickly become hard to read.

1Understanding Conditional Rendering with if/else

💡

Reach for an if/else block, assigning to a variable, or an early return, instead of a nested ternary once conditional rendering logic involves more than a simple two-way choice — deeply nested ternaries inside JSX are notoriously hard to read correctly.

editor.html

function Status({ isLoading, error, data }) {
  let content;
  if (isLoading) {
    content = <p>Loading...</p>;
  } else if (error) {
    content = <p>Error: {error}</p>;
  } else {
    content = <p>Data: {data}</p>;
  }
  return <div>{content}</div>;
}

localhost:3000

2Practical Example

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

editor.html

function UserGreeting({ user }) {
  if (!user) {
    return <p>Please log in.</p>;
  }
  return <p>Welcome back, {user.name}!</p>;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Conditional Rendering with if/else:

1. Use an if/else block, assigning the result to a variable before the return, or via an early return, for conditional logic more complex than a straightforward two-way choice

2. Use an early return at the top of a component for a clear guard-clause case, like returning null or a loading indicator before the rest of the component's logic runs

3. Reserve the ternary and logical && operators for genuinely simple, inline conditional expressions, switching to if/else once nesting or complexity grows

⚠️

Tip: Reach for an if/else block, assigning to a variable, or an early return, instead of a nested ternary once conditional rendering logic involves more than a simple two-way choice — deeply nested ternaries inside JSX are notoriously hard to read correctly.

editor.html

function Status({ isLoading, error, data }) {
  let content;
  if (isLoading) {
    content = <p>Loading...</p>;
  } else if (error) {
    content = <p>Error: {error}</p>;
  } else {
    content = <p>Data: {data}</p>;
  }
  return <div>{content}</div>;
}

localhost:3000

Examples

Example 01Basic Usage

function Status({ isLoading, error, data }) {
  let content;
  if (isLoading) {
    content = <p>Loading...</p>;
  } else if (error) {
    content = <p>Error: {error}</p>;
  } else {
    content = <p>Data: {data}</p>;
  }
  return <div>{content}</div>;
}

Example 02Advanced Example

function UserGreeting({ user }) {
  if (!user) {
    return <p>Please log in.</p>;
  }
  return <p>Welcome back, {user.name}!</p>;
}

Best Practices

Use an if/else block, assigning the result to a variable before the return, or via an early return, for conditional logic more complex than a straightforward two-way choice
Use an early return at the top of a component for a clear guard-clause case, like returning null or a loading indicator before the rest of the component's logic runs
Reserve the ternary and logical && operators for genuinely simple, inline conditional expressions, switching to if/else once nesting or complexity grows

Interview Question

Why can't an if/else statement be written directly inside JSX curly braces the way {condition ? <A /> : <B />} can?▼

Hint: Think about what curly braces in JSX are allowed to contain, and whether if/else produces a value the way a ternary does.

JSX curly braces can only hold a JavaScript expression, something that evaluates to a single value, since each embedded {...} compiles down directly into an argument value passed to the underlying React.createElement()-style function call — an if/else construct is a control-flow statement, not an expression, meaning it doesn't itself evaluate to any value at all, it only decides which block of code runs. A ternary expression, by contrast, is a genuine expression that always evaluates to one of its two branches as a single resulting value, which is exactly why it fits into that argument-value slot where if/else fundamentally cannot. This is precisely why if/else-based conditional rendering has to happen outside the JSX itself, computing the JSX to render into a plain variable beforehand, or returning early from the component function, rather than being written directly inline within the markup.

Exercises

MediumPractice using Conditional Rendering with if/else in a real scenario.

View Solution

function Status({ isLoading, error, data }) {
  let content;
  if (isLoading) {
    content = <p>Loading...</p>;
  } else if (error) {
    content = <p>Error: {error}</p>;
  } else {
    content = <p>Data: {data}</p>;
  }
  return <div>{content}</div>;
}

Frequently Asked Questions

Why can't an if/else statement be written directly inside JSX curly braces the way {condition ? <A /> : <B />} can?▼

Related Functions

ternary-operatorlogical-operator-andconditional-component-rendering