Conditional Rendering

Most real UIs need to show different things depending on state - a loading spinner, an error message, an empty state. React does not have special template directives for this; you just use ordinary JavaScript to decide what JSX to return.

if/else Before the Return

The most straightforward approach is a plain `if`/`else` statement before the `return`, picking which JSX to hand back. This works well when the branches are substantially different pieces of markup.

Try it yourself

Branching with if/else

function Status({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>Welcome back!</p>;
  }
  return <p>Please log in.</p>;
}

function App() {
  return <Status isLoggedIn={false} />;
}

render(<App />);

Output

Please log in.

The Ternary Operator Inline

For smaller, inline decisions within JSX, the ternary operator `condition ? a : b` is the idiomatic choice, since it is an expression and can sit directly inside `{ }`.

Try it yourself

function LoginButton({ isLoggedIn }) {
  return (
    <button>{isLoggedIn ? 'Log Out' : 'Log In'}</button>
  );
}

render(<LoginButton isLoggedIn={true} />);

Output

Short-Circuiting with &&

When you only need to render something in one case and nothing otherwise, `condition && <Element />` is common: if `condition` is falsy, React skips rendering that expression entirely (it renders `false`, which is ignored). Be careful with numeric conditions like `count && <List />` - if `count` is `0`, React will actually render the literal `0` onto the page, since `0` is falsy but not `null`/`false`/`undefined`. Prefer an explicit `count > 0 && ...` check.

Try it yourself

Rendering a badge only when there are unread messages

function Inbox({ unreadCount }) {
  return (
    <div>
      <span>Inbox</span>
      {unreadCount > 0 && <span style={{ marginLeft: 6, color: 'red' }}>({unreadCount})</span>}
    </div>
  );
}

render(<Inbox unreadCount={3} />);

Output

Inbox(3)

Returning null to Render Nothing

A component can return `null` to render nothing at all, which is useful for components that conditionally opt out of rendering entirely (like a banner that only shows under certain conditions) without the parent needing to know.

switch and Lookup Objects for Many Branches

When you have several possible states rather than just two, a `switch` statement (in a helper function above the JSX) or a plain object used as a lookup table both tend to read more clearly than a chain of ternaries.

Try it yourself

Using a lookup object instead of nested ternaries

function StatusBadge({ status }) {
  const labels = {
    pending: 'Pending',
    shipped: 'Shipped',
    delivered: 'Delivered',
  };

  return <span>{labels[status] || 'Unknown'}</span>;
}

render(<StatusBadge status="shipped" />);

Output

Shipped

Coding challenge

Build a WeatherIcon component that takes a condition prop ("sunny", "rainy", or anything else) and renders a different emoji + label for each, using a lookup object with a fallback for unknown conditions.

function WeatherIcon({ condition }) {
  // write your code here
  return null;
}

render(<WeatherIcon condition="rainy" />);

Output

Answer every question below to mark this chapter as complete.

Quiz Yourself

Score: 0/4

1. What happens when you use `count && <List />` and `count` is `0`?

2. What does returning `null` from a component do?

3. Which approach is most idiomatic for a simple two-way inline decision inside JSX?

4. Why might a lookup object be preferred over several nested ternaries for many possible values?