Skip to main content

Conditional Rendering in React: if/else and Ternaries

Conditional rendering is the technique of displaying different UI elements or components based on specific conditions, such as a user's login status or the presence of data. React does not have special syntax for this—you use standard JavaScript if/else statements and ternary operators to control which JSX your component returns. Mastering these patterns is essential for building responsive, dynamic user interfaces.

Key Takeaways​

  • Conditional rendering in React uses plain JavaScript; there is no special React syntax
  • Use if/else statements when returning entirely different components or large JSX blocks
  • Assign JSX to variables with let to conditionally prepare UI before rendering
  • The ternary operator (condition ? trueValue : falseValue) is ideal for inline conditions inside JSX
  • Choose the technique that makes your component intent clearest; avoid nested ternaries when code readability suffers

How Does Conditional Rendering Work in React?​

React does not invent special syntax for conditions (unlike some frameworks with x-if attributes). Instead, you use full JavaScript power to control your UI logic. Common patterns include if/else statements, the ternary operator (? :), the logical AND operator (&&), and switch statements. This article focuses on the first two—the most foundational and commonly used techniques.

When Should You Use if/else Statements?​

An if/else statement is ideal when you need to return completely different components or large, distinct blocks of JSX. This pattern is very clear and easy to read.

import React from 'react';

function LoginButton({ onClick }) {
  return <button onClick={onClick}>Log In</button>;
}

function LogoutButton({ onClick }) {
  return <button onClick={onClick}>Log Out</button>;
}

function LoginStatus({ isLoggedIn }) {
  if (isLoggedIn) {
    return <LogoutButton />;
  } else {
    return <LoginButton />;
  }
}

export default function App() {
  const loggedIn = true;
  return <LoginStatus isLoggedIn={loggedIn} />;
}

Code Breakdown:

  1. function LoginStatus({ isLoggedIn }) — The component receives a boolean isLoggedIn prop.
  2. if (isLoggedIn) — Use a standard if statement to check the prop value.
  3. return <LogoutButton /> — If true, return early with LogoutButton. The rest of the function does not execute.
  4. else { return <LoginButton />; } — If false, return the LoginButton instead.

This pattern is clear when outputs are completely different components, avoiding code duplication.

How Do You Conditionally Assign JSX to a Variable?​

When only a small part of your component needs to change while the rest remains static, use if/else to assign JSX to a variable and render it inside your main JSX tree. This avoids duplicating surrounding markup.

function LoginStatus({ isLoggedIn }) {
  let button;

  if (isLoggedIn) {
    button = <LogoutButton />;
  } else {
    button = <LoginButton />;
  }

  return (
    <div>
      <h2>Welcome to the App!</h2>
      {button}
    </div>
  );
}

This approach is more verbose for simple cases but becomes invaluable when the conditional part is one piece of a much larger component, helping you avoid repeating the surrounding structure.

What Is the Ternary Operator and When Should You Use It?​

When you need to choose between two expressions inside JSX, you cannot use an if statement because it is a statement, not an expression. The conditional (ternary) operator is the perfect tool: condition ? expressionIfTrue : expressionIfFalse.

import React from 'react';

function PackingListItem({ name, isPacked }) {
  return (
    <li>
      {isPacked ? name + ' ✅' : name + ' ❌'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Packing List</h1>
      <ul>
        <PackingListItem isPacked={true} name="Space suit" />
        <PackingListItem isPacked={false} name="Photo of Tam" />
      </ul>
    </section>
  );
}

Code Breakdown:

  • {isPacked ? ... : ...} — Curly braces open a JavaScript window inside JSX.
  • isPacked ? name + ' ✅' — If true, the expression evaluates to the item name with a checkmark.
  • : name + ' ❌' — Otherwise, it evaluates to the item name with a cross mark.

You can also render different JSX elements with the ternary operator:

function PackingListItem({ name, isPacked }) {
  return (
    <li>
      {isPacked ? <del>{name}</del> : name}
    </li>
  );
}

The ternary operator is extremely common in React for its conciseness. However, for complex, nested conditions, readability suffers; in those cases, assign the logic to a variable instead.

Best Practices for Conditional Rendering​

  • Use if/else for major differences: When two outcomes are entirely different components or significant blocks of JSX, a standard if/else is clearest.
  • Use variables for flexibility: Assigning JSX to a variable with let allows you to prepare a conditional piece before placing it in a larger, static structure.
  • Use ternaries for inline conditions: The ternary operator excels at choosing between two expressions directly inside JSX.
  • Prioritize readability: Choose the technique that makes your component intent clearest. Avoid deeply nested ternaries—extract them into variables when nesting becomes confusing.
  • Keep early returns simple: When using if/else for early returns, keep each branch simple and focused.

Frequently Asked Questions​

Can you use if/else statements directly inside JSX markup?​

No. You cannot write statements inside curly braces in JSX—only expressions. The ternary operator (? :) is an expression and works inline. For if/else statements, use them before the return statement or assign the result to a variable.

What is the difference between using if/else and ternary operators?​

if/else statements are used before the return to determine what the entire component or a large block returns. Ternary operators are expressions used inline inside JSX to choose between two values. Use if/else for major logic; use ternaries for small inline choices.

How do you handle a condition with three or more outcomes?​

Use nested ternary operators: condition1 ? valueA : condition2 ? valueB : valueC. However, this becomes hard to read quickly. For three or more outcomes, assign logic to a variable or use a switch statement before the return.

What does {false}, {null}, or {undefined} render in React?​

These render nothing—they are ignored. This is useful: {isPacked && <div>Item packed!</div>} renders nothing if isPacked is false. This is the logical AND pattern for conditional rendering.

Why can't I write {if (condition) {...}} inside JSX?​

Because if is a statement, not an expression. JSX expressions in curly braces must evaluate to a value. Use the ternary operator (an expression) instead, or compute the value before the return.

Further Reading​