Conditional Rendering

Learning objectives#

• Choose between elements with if, ternary and &&
• Return null to render nothing
• Avoid the “0 on screen” bug with &&
• Keep complex conditions readable

Explanation#

Before return, use normal if statements and early returns: if (loading) return <Spinner />;.

Inside JSX, choose between two options with a ternary: {isOpen ? <Menu /> : <MenuButton />}.

Show something or nothing with &&: {error && <p>{error}</p>}.

Watch out: {count && <Badge />} renders 0 when count is 0, because 0 is falsy but still rendered. Use {count > 0 && <Badge />}.

Returning null from a component renders nothing. For many cases, a variable set before return or an object lookup ({ success: <Ok />, error: <Fail /> }[status]) keeps JSX readable.

Syntax#

1if (loading) return <p>Loading…</p>;
2return (
3  <>
4    {user ? <p>Hi {user.name}</p> : <button>Log in</button>}
5    {items.length > 0 && <Cart items={items} />}
6  </>
7);

Code example: Order status in four states#

1function StockBadge({ stock }) {
2  if (stock > 10) return null;                             // nothing to show
3  return <span>{stock === 0 ? 'Sold out' : `Only ${stock} left`}</span>;
4}
5

6function OrderStatus({ status, order, error }) {
7  if (status === 'loading') return <p>Loading order…</p>;    // early return
8  if (status === 'error') return <p role="alert">Error: {error}</p>;
9

10  return (
11    <article>
12      <h3>Order #{order.id}</h3>
13      {order.items.length > 0 && <p>{order.items.length} items</p>}
14      {order.items.length === 0 && <p>No items</p>}
15      {order.delivered ? <p>Delivered ✓</p> : <p>On the way 🚚</p>}
16      <StockBadge stock={order.stock} />
17    </article>
18  );
19}
20

21export default function Demo() {
22  return (
23    <>
24      <OrderStatus status="loading" />
25      <OrderStatus status="error" error="Network down" />
26      <OrderStatus status="ok" order={{ id: 7, items: [], delivered: false, stock: 0 }} />
27      <OrderStatus status="ok" order={{ id: 8, items: ['Pen', 'Bag'], delivered: true, stock: 40 }} />
28    </>
29  );
30}

Loading order…
Error: Network down
Order #7 — No items — On the way 🚚 — Sold out
Order #8 — 2 items — Delivered ✓       (no stock badge: stock is 40)

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. Early returns handle loading and error before any order data is read.
2. items.length > 0 && ... avoids printing a stray 0 for empty orders.
3. A ternary switches between “Delivered” and “On the way”.
4. StockBadge returns null when stock is high, so nothing is rendered.

Real-world use case#

Common mistakes#

Best practices#

• Early returns for loading/error/empty
• Ternary for either-or, && for show-or-nothing
• Explicit boolean conditions with &&
• Return null to hide a component

Remember this#

Practice exercise#

1export default function Greeting({ user = { name: 'Asha', isAdmin: true } }) {
2  if (!user) return <button>Log in</button>;
3  return <p>Welcome back, {user.isAdmin ? `admin ${user.name}` : user.name}</p>;
4}

Mini quiz#

<div>{messages.length && <Inbox />}</div>

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.