Conditional Rendering

Introduction

Real interfaces rarely show the exact same thing every time — a loading spinner while data fetches, an error message if something fails, a "Log In" button instead of a "Log Out" button. Deciding what to render based on the current state is called conditional rendering, and React does not need a special syntax for it: it just uses plain JavaScript.

In this lesson you will learn the four main patterns for conditional rendering: a plain if statement before your return, the ternary operator for inline either/or choices, the && operator for showing something only when a condition is true, and returning null when you want to render nothing at all.

Using an if Statement

The simplest way to conditionally render something in React is to use a regular JavaScript if statement before your component's return, deciding what JSX to produce.

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }

  return <h1>Please log in.</h1>;
}

<Greeting isLoggedIn={true} />  ->  Welcome back!
<Greeting isLoggedIn={false} /> ->  Please log in.

This approach works great when the two outcomes are very different pieces of UI, or when you have more than two branches to handle.

The Ternary Operator

When you need to choose between two small pieces of JSX inline, without a full if statement, the ternary operator (condition ? valueIfTrue : valueIfFalse) is the standard tool. It works directly inside curly braces in your JSX.

function StatusBadge({ isOnline }) {
  return (
    <p>
      Status: {isOnline ? "🟢 Online" : "🔴 Offline"}
    </p>
  );
}

<StatusBadge isOnline={true} />  ->  Status: 🟢 Online
<StatusBadge isOnline={false} /> ->  Status: 🔴 Offline

The ternary shines for small, either/or decisions embedded right inside the markup, keeping the two possible outcomes visually close together.

The && Operator

Sometimes you only want to render something when a condition is true, and render nothing otherwise — there is no "else" case. For this, React code commonly uses the && operator, relying on how JavaScript short-circuits: if the left side is falsy, JavaScript never evaluates the right side, and nothing is rendered.

function Inbox({ unreadCount }) {
  return (
    <div>
      <h2>Inbox</h2>
      {unreadCount > 0 && <p>You have {unreadCount} unread messages.</p>}
    </div>
  );
}

<Inbox unreadCount={3} /> ->
Inbox
You have 3 unread messages.

<Inbox unreadCount={0} /> ->
Inbox

The Classic Zero Bug

The && pattern has one famous pitfall. If the left-hand value is the number 0 (not a boolean), JavaScript's short-circuit still stops there — but the expression evaluates to 0, not false. Unlike false, null, or undefined, React does render the number 0 onto the screen.

function Cart({ itemCount }) {
  return (
    <div>
      {/* Bug: renders a literal "0" when itemCount is 0 */}
      {itemCount && <p>You have {itemCount} items in your cart.</p>}
    </div>
  );
}

<Cart itemCount={0} /> ->
0

The fix is to make sure the left side of && always evaluates to an actual boolean, not a number, by writing an explicit comparison such as itemCount > 0.

function Cart({ itemCount }) {
  return (
    <div>
      {itemCount > 0 && <p>You have {itemCount} items in your cart.</p>}
    </div>
  );
}

<Cart itemCount={0} /> ->
(nothing rendered)

Rendering Nothing with null

Occasionally an entire component should render nothing at all, based on a condition. A React component is allowed to return null, and React simply skips rendering any DOM for that component.

function Banner({ message }) {
  if (!message) {
    return null; // render nothing when there is no message
  }

  return <div className="banner">{message}</div>;
}

<Banner message="Sale ends today!" /> -> Sale ends today! (inside a div)
<Banner message="" />                 -> (nothing rendered)
<Banner />                             -> (nothing rendered)

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Conditional rendering is one of the most common things you will do in any React component, and it is built entirely from ordinary JavaScript: if statements, ternaries, and the && operator. Knowing when to reach for each one — and watching out for the classic "0" bug — keeps your JSX clean and bug-free.

In this lesson, you learned how to branch your UI with an if statement, choose between two outcomes with a ternary, show something only when true with &&, and render nothing at all with null. Next, you will learn how to render lists of data using .map() and why the key prop matters.