Conditional Rendering

Conditional rendering means deciding what UI to show based on a condition. Because JSX is just an expression, you use ordinary JavaScript: the ternary cond ? a : b to pick between two things, the && operator to show something only when true, and a plain variable / early return when you have several cases.

Learn Conditional Rendering in our free React course — a beginner-friendly interactive lesson with runnable examples, a practice exercise and a quick recall.

Part of the free React course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

1️⃣ The Ternary — Pick One of Two

When you're choosing between exactly two things to render, reach for the ternary condition ? a : b . It's an expression, so it drops straight into JSX braces.

2️⃣ The && Operator — Show or Show Nothing

When you want to show something only if a condition holds (and nothing otherwise), use cond && element . If the condition is false, React renders nothing. The classic bug: a number like 0 is falsy, so {' '} renders a literal 0 . Always test a boolean: {' '} .

3️⃣ Many Cases — Variables & Early Returns

You can't put an if statement inside JSX braces (braces hold expressions, and if is a statement). For three or more branches, compute the element in a variable above the return, or use early returns — one per case. Far cleaner than nested ternaries.

These lines build a component that handles three states with early returns. Put them in the right order:

📋 Quick Reference

A literal 0 on screen. 0 is falsy so && returns 0, and React renders it. Use count > 0 && .

2. You need to show a spinner OR the content — which tool?

No. Braces hold expressions; if is a statement. Compute above the return or use a ternary.

Build one display string per user combining a status dot, the name, and an unread count that only appears when greater than 0. Run it and check your output.

Practice quiz

When should you use a ternary instead of && for conditional rendering?

  • When showing something or nothing
  • When rendering a list
  • When choosing between two different things to show
  • Never; they are identical

Answer: When choosing between two different things to show. Use a ternary (cond ? a : b) to pick between two outputs; use && to show one thing or nothing.

What does {count && <Badge />} render when count is 0?

  • A literal 0 on screen
  • Nothing
  • The Badge
  • undefined

Answer: A literal 0 on screen. 0 is falsy, so && evaluates to 0 and React renders the literal 0. Use {count > 0 && <Badge />}.

Why can't you put an if statement directly inside JSX braces?

  • if is too slow
  • React disables if in JSX
  • if only works in class components
  • JSX braces hold expressions, and if is a statement

Answer: JSX braces hold expressions, and if is a statement. Braces contain expressions. Compute the value with if above the return, or use a ternary inside the braces.

What is the cleanest way to handle three or more rendering cases?

  • Deeply nested ternaries
  • Early returns or a lookup object
  • Many && operators chained together
  • A single if with no else

Answer: Early returns or a lookup object. For 3+ branches, prefer early returns (one element per case) or a lookup object over nested ternaries.

Which renders nothing when the condition is false?

  • {cond && <X />}
  • {cond ? <X /> : <Y />}
  • {cond || <X />}
  • {!cond}

Answer: {cond && <X />}. cond && <X /> shows <X /> only when cond is true; when false, React renders nothing.

You need to show a Spinner OR the Content. Which tool fits best?

  • {loading && <Spinner/>}
  • An if inside the braces
  • A ternary: {loading ? <Spinner/> : <Content/>}
  • A key prop

Answer: A ternary: {loading ? <Spinner/> : <Content/>}. Two mutually exclusive branches call for a ternary with an explicit else.

How do you safely avoid the '0 leaks onto the screen' trap?

  • Use {count && ...}
  • Test a real boolean, e.g. {count > 0 && ...}
  • Wrap count in quotes
  • Use a ternary with no else

Answer: Test a real boolean, e.g. {count > 0 && ...}. Convert to a boolean test like count > 0 (or Boolean(count)) so a zero never renders.

With early returns ordering cases, how should you order them?

  • General case first, then specific
  • Alphabetically
  • Order does not matter
  • Specific cases first, then the general/default last

Answer: Specific cases first, then the general/default last. Earlier returns win, so check specific states (loading, error) first and fall through to the default.

JSX is fundamentally what, which is why ordinary JS decides rendering?

  • A template string
  • An expression
  • A statement
  • A CSS rule

Answer: An expression. JSX is just an expression, so you use normal JavaScript (ternary, &&, variables) to choose what to show.

You want a fallback for the false branch, but && shows nothing. What should you switch to?

  • Another &&
  • An if inside JSX braces
  • A ternary with an explicit else
  • A for loop

Answer: A ternary with an explicit else. && renders nothing when false. For an explicit alternative, use a ternary: cond ? a : b.