Skip to content
WANCODE
BM

Conditional Rendering

15 minBeginnerReact

In this lesson

  • Return early from a component (including returning null) when there is nothing to show
  • Choose between two pieces of UI with the ternary operator ? :
  • Use && safely and explain why {count && …} can print a 0

The big idea

A component is just a function, so it can decide what to return. Plain JavaScript — if, ? : and && — is all you need to show the right thing at the right time.

Real apps change depending on the situation: a Log in button for guests, a greeting for members, a badge only when there are new messages. React has no special if syntax for this — you use ordinary JavaScript, because your component is ordinary JavaScript.

1. if with an early return

When a whole component should look different (or disappear), check the condition first and return early. Returning null means "render nothing here".

JSX
function OrderStatus({ order }) {
  if (!order) {
    return null; // nothing to show yet
  }
  if (order.ready) {
    return <p>Your kopi is ready!</p>;
  }
  return <p>Brewing… order #{order.number}</p>;
}

A component that returns null is still mounted — its state is kept and its hooks still run. It simply puts nothing on the screen.

2. The ternary ? : — this OR that

if is a statement, so it can't go inside JSX curly braces. The ternary operator is an expression, so it can: condition ? whenTrue : whenFalse. Use it when you always want to show one of two things.

JSX
<button onClick={toggle}>
  {loggedIn ? "Log out" : "Log in"}
</button>

{loggedIn ? <Dashboard /> : <LoginForm />}

3. && — this OR nothing

a && b gives back a if a is falsy, otherwise b. React renders nothing for false, null, undefined and true — so {isOpen && <Menu />} shows the menu only when isOpen is true.

The 0 && pitfall

Numbers are not ignored. If count is 0, then {count && <Badge />} evaluates to 0 — and React happily prints a lonely 0 on the page. Always give && a real true/false on the left: count > 0 &&.

Prints 0 when empty

JSX
{cart.length && <CartBadge count={cart.length} />}

Shows nothing when empty

JSX
{cart.length > 0 && <CartBadge count={cart.length} />}

Which one should I use?

  • Early return — the whole component depends on the condition (loading, empty, not allowed).
  • Ternary ? : — inside JSX, when you want one of two things.
  • && — inside JSX, when you want something or nothing. Make the left side a real boolean.

Right now the greeting Welcome back, Aina! shows even before anyone logs in, and the button always says Log in.

Use the loggedIn state so that:

• the .greeting paragraph appears only when logged in (show a different hint, or nothing, when logged out);

• the #login button says Log in when logged out and Log out when logged in.

Checks

  • No greeting before logging in
  • Logging in shows the greeting and a Log out button

Check understanding

Q1

items is an empty array. What does {items.length && <List />} show?

Q2

What happens when a component returns null?

Q3

Inside JSX you want to show <Dashboard /> for members and <LoginForm /> for guests. What fits best?

What you learned

  • Components are functions, so plain JavaScript decides what they render.
  • Early return (or return null) for whole-component decisions; ? : for one-of-two; && for something-or-nothing.
  • React skips false, null, undefined and true, but prints numbers — so 0 && leaks a 0. Use count > 0 &&.
Preview

Console output from your code appears here.

Step 1 of 2