Conditional rendering

One component, a different row for each case

Real pages change with their data. A product that's sold out shows "sold out" instead of a button. An empty cart says so. A sale banner appears only during a sale. Showing different things in different cases is called conditional rendering, and React has no special syntax for it: you use the JavaScript you already know. Here is a product list where one row is different. Its result is live under the code.

1function ProductRow({ name, stock }) {2  if (stock === 0) {3    return <li>{name}: sold out</li>;4  }5  return (6    <li>7      {name}: {stock} left <button>Add to cart</button>8    </li>9  );10}11 12export default function App() {13  return (14    <ul>15      <ProductRow name="Tea" stock={5} />16      <ProductRow name="Cake" stock={2} />17      <ProductRow name="Lemonade" stock={0} />18    </ul>19  );20}

ProductRow on line 1 takes two props, name and stock, from its tag on lines 15 to 17, as in Passing props to a component.

Line 2 is a plain if statement. When stock is 0, line 3 returns a short row that says sold out, and the function ends there. Otherwise the if is skipped, and lines 5 to 9 return the full row with the count and a button. App uses ProductRow three times, so the result shows Tea: 5 left and Cake: 2 left, each with a button, and Lemonade: sold out.

Press Edit & run and change Lemonade's stock={0} on line 17 to stock={3}. The result updates as you type: Lemonade gets 3 left and a button. You changed the data; the component chose the row.

Choosing with if, before the return

A component is a function, so everything a function can do before its return is open to you, including if. The most common shape is the early return: handle a special case first and return right away, so the rest of the function only deals with the usual case. A cart summary is a good fit, because an empty cart has nothing to add up:

1function CartSummary({ items }) {2  if (items.length === 0) {3    return <p>Your cart is empty.</p>;4  }5 6  const total = items.reduce((sum, item) => sum + item.price, 0);7  return (8    <p>9      {items.length} items, ${total} in total10    </p>11  );12}13 14const tea = { name: "Tea", price: 3 };15const cake = { name: "Cake", price: 4 };16 17export default function App() {18  return (19    <>20      <CartSummary items={[]} />21      <CartSummary items={[tea, cake]} />22    </>23  );24}

Line 2 checks for an empty cart. If items has no items, line 3 returns Your cart is empty. and CartSummary stops: a return ends the function, so line 6 never runs. For a cart with items, line 6 adds up the prices with reduce, and lines 7 to 11 return the summary. Line 20 passes an empty array and line 21 passes tea and cake, so the result shows Your cart is empty., then 2 items, $7 in total.

The if sits above the return, not inside the JSX. As JavaScript in JSX with curly braces showed, curly braces take only an expression, code that gives back a value, and if is a statement. Inside the braces, the ternary and && below do the choosing.

An if can also choose what goes in one part of the markup. JSX is a value, a small object that describes an element, so you can store it in a variable, change it with if, and put the variable in the braces:

1function OrderStatus({ id, status }) {2  let message = <span>We're packing it.</span>;3  if (status === "shipped") {4    message = <span>It's on its way.</span>;5  } else if (status === "delivered") {6    message = <strong>Delivered.</strong>;7  }8  return <li>Order {id}: {message}</li>;9}10 11export default function App() {12  return (13    <ul>14      <OrderStatus id={7} status="packing" />15      <OrderStatus id={8} status="shipped" />16      <OrderStatus id={9} status="delivered" />17    </ul>18  );19}

Line 2 makes message with the usual case, a <span> saying We're packing it. It uses let, so lines 4 and 6 can replace it: with "on its way" when the order has shipped, or a <strong> when it's delivered. Line 8 puts whichever one is left into the row with {message}. The result shows three orders, 7, 8, and 9, one in each state.

This is the most flexible shape, and the one to reach for when there are three or more cases, or when each case needs a few lines of its own. The <li> around the message is written once, on line 8, whatever the status.

The ternary: one of two, inside the JSX

The overview's ProductRow has two return statements, and both build an <li>. When only a small part changes, you can write the row once and choose just that part with the ternary operator: condition ? a : b gives back a when the condition is true and b when it's false. It's an expression, so it fits inside curly braces, and in an attribute's value too:

1function ProductRow({ name, stock }) {2  return (3    <li className={stock > 0 ? "in-stock" : "sold-out"}>4      {name}: {stock > 0 ? <button>Add to cart</button> : <em>sold out</em>}5    </li>6  );7}8 9export default function App() {10  return (11    <ul>12      <ProductRow name="Tea" stock={5} />13      <ProductRow name="Cake" stock={2} />14      <ProductRow name="Lemonade" stock={0} />15    </ul>16  );17}

Line 3 picks the row's class: "in-stock" when stock > 0, otherwise "sold-out". The styles.css tab makes in-stock rows bold and fades sold-out ones. Line 4 picks the end of the row: a button, or <em>sold out</em>. Read it as "if stock > 0, a button, otherwise sold out". Tea and Cake get buttons, and Lemonade's row is faded and says sold out.

Is this different from writing two returns? No. JSX elements are descriptions, not pieces of the page, so both versions hand React the same description for the same data, and the page ends up the same. Choose whichever reads better: two returns when the cases are very different, a ternary when they share most of the markup.

A ternary inside another ternary works, but it gets hard to read quickly:

<p>
  {stock === 0 ? "Sold out" : stock < 3 ? "Only a few left" : "In stock"}
</p>

Line 2 reads: if stock is 0, Sold out; otherwise, if it's below 3, Only a few left; otherwise In stock. It's a fragment of a component, so it has no result of its own. The same three cases read more easily as if statements with a variable, before the return:

1function StockLabel({ stock }) {2  let label = "In stock";3  if (stock === 0) {4    label = "Sold out";5  } else if (stock < 3) {6    label = "Only a few left";7  }8  return <p>{label}</p>;9}10 11export default function App() {12  return (13    <>14      <StockLabel stock={5} />15      <StockLabel stock={2} />16      <StockLabel stock={0} />17    </>18  );19}

Line 2 starts with the usual case, and lines 3 to 7 replace it for the two special ones. Line 8 shows the result. For stock 5, 2, and 0, the result reads In stock, Only a few left, and Sold out.

&& for something or nothing, and the stray 0

Often you want a piece of markup in one case and nothing in the other: a note for members, a free-delivery line over $20. A ternary with null on one side works, and && says it more briefly:

1function Checkout({ total, isMember }) {2  return (3    <section>4      <p>Total: ${total}</p>5      {isMember && <p>Members get free delivery.</p>}6      {total >= 20 && <p>Your order ships free.</p>}7    </section>8  );9}10 11export default function App() {12  return (13    <>14      <Checkout total={12} isMember={true} />15      <Checkout total={25} isMember={false} />16    </>17  );18}

Read line 5 as "if isMember, then this paragraph". Here is how it works. a && b looks at a first. If a is falsy, it stops and gives back a itself. If a is truthy, it gives back b. So for a member, line 5 gives back the <p>; for anyone else it gives back false. React draws nothing for false, true, null, or undefined, so that spot stays empty. Line 6 does the same with a comparison: total >= 20.

Line 14 is a member with a $12 order, and line 15 isn't a member but spends $25. The result shows Members get free delivery. under the first total and Your order ships free. under the second.

There's one trap. "Gives back a itself" matters when a is a number, because React does show numbers, including 0. Here a cart link shows its count in brackets, with a bug on purpose:

1function CartLink({ count }) {2  return (3    <p>4      Cart {count && <strong>({count})</strong>}5    </p>6  );7}8 9export default function App() {10  return (11    <>12      <CartLink count={2} />13      <CartLink count={0} />14    </>15  );16}

The first link says Cart (2), as it should. The second says Cart 0. On line 4, count && … with a count of 0 stops at the falsy 0 and gives back 0, not false, and React shows it. NaN, the "not a number" value, does the same. An empty string "" is given back too, but it shows as empty text, so you can't see it.

The fix is to give && a true-or-false test. Press Edit & run and change line 4 to {count > 0 && <strong>({count})</strong>}. 0 > 0 is false, so the second link reads just Cart. A ternary, {count > 0 ? <strong>…</strong> : null}, works too. The JavaScript you need for React has a playground that shows what JSX does with every kind of value.

1function CartLink({ count }) {2  return (3    <p>4      Cart {count > 0 && <strong>({count})</strong>}5    </p>6  );7}8 9export default function App() {10  return (11    <>12      <CartLink count={2} />13      <CartLink count={0} />14    </>15  );16}

Returning null, and where the condition lives

A component can return null, which means "nothing to show". So a component can decide for itself to show nothing. Here a sale banner returns null when there's no sale:

1function SaleBanner({ onSale }) {2  if (!onSale) {3    return null;4  }5  return <p className="banner">Sale: 20% off tea</p>;6}7 8function ProductPage({ onSale }) {9  return (10    <div>11      <h3>Green tea</h3>12      <SaleBanner onSale={onSale} />13      <p>$3</p>14    </div>15  );16}17 18export default function App() {19  return (20    <>21      <ProductPage onSale={true} />22      <ProductPage onSale={false} />23    </>24  );25}

Lines 2 to 4 return null when onSale is false, so SaleBanner shows nothing. Otherwise line 5 returns the banner. Line 12 uses SaleBanner inside ProductPage and passes onSale along. Lines 21 and 22 show the page twice: the first with the banner under the heading, the second without it.

The same page could leave the banner out from the parent instead: {onSale && <SaleBanner />} in ProductPage, with a SaleBanner that always shows. The page looks the same. What differs is what React gets. Try all four ways below; onSale switches the sale on and off, and the result pane shows what ProductPage returns, whether React calls SaleBanner, and the real HTML on the page.

1function SaleBanner() {2  return <p className="banner">Sale: 20% off tea</p>;3}4 5function ProductPage({ onSale }) {6  return (7    <div>8      <h3>Green tea</h3>9      {onSale && <SaleBanner />}10      <p>$3</p>11    </div>12  );13}

…

Start with && in ProductPage and onSale={false}. The <div> holds <h3>, false, and <p>, and SaleBanner is "Not called": React calls only the components in the description. Pick SaleBanner returns null: the description now holds <SaleBanner onSale={false} />, so React calls it, and it returns null. The HTML is the same both times.

Which to choose? Usually the parent: {onSale && <SaleBanner />} says right where the banner is used that it might not show. Returning null suits a component that knows better than its parents when it has nothing to say, like a warning that checks its own numbers. Either way, prefer null to undefined. Since React 18, a component that returns undefined also shows nothing, without an error, so a forgotten return fails silently; return null says you meant it.

Not rendered means removed

Now pick the hidden attribute with onSale={false}. The HTML still holds the banner's <p>, with hidden: it's on the page, and the browser doesn't draw it. With the other three ways, the element isn't there at all. That difference matters as soon as the element holds something the reader typed:

1import { useState } from "react";2 3export default function App() {4  const [wantsNote, setWantsNote] = useState(false);5 6  return (7    <>8      <label>9        <input10          type="checkbox"11          checked={wantsNote}12          onChange={(event) => setWantsNote(event.target.checked)}13        />14        Add a gift note15      </label>16      {wantsNote && <textarea placeholder="Your note" />}17    </>18  );19}

Line 4 keeps wantsNote in state, a value React remembers for the component, starting as false. Ticking the box on lines 9 to 13 sets it, and React shows the component again (state gets its own lesson, State: a component's memory). Line 16 shows the <textarea> only while wantsNote is true.

Tick the box, type Happy birthday, Asha, untick it, and tick it again. The box is empty. When wantsNote became false, React removed the <textarea> from the page, and your text went with it; ticking again made a new, empty one. Now press Edit & run and change line 16 to <textarea placeholder="Your note" hidden={!wantsNote} />. Try again: the note is still there, because the element never left the page. Remove what you don't need; hide what has to keep its contents.

An order history with every kind of condition

A real page mixes all of these. Here is an order history: each order shows its status, a gift label when it's a gift, and a button that depends on where the order is.

1const orders = [2  { id: 7, item: "Tea", status: "delivered", gift: false },3  { id: 8, item: "Cake", status: "shipped", gift: true },4  { id: 9, item: "Lemonade", status: "packing", gift: false },5];6 7function OrderActions({ status }) {8  if (status === "packing") {9    return <button>Cancel</button>;10  }11  if (status === "shipped") {12    return <button>Track</button>;13  }14  return null;15}16 17function OrderRow({ order }) {18  const done = order.status === "delivered";19  return (20    <li>21      #{order.id} {order.item}: {done ? <strong>delivered</strong> : order.status}22      {order.gift && <em> (gift)</em>} <OrderActions status={order.status} />23    </li>24  );25}26 27export default function App() {28  if (orders.length === 0) {29    return <p>No orders yet.</p>;30  }31  return (32    <ul>33      {orders.map((order) => (34        <OrderRow key={order.id} order={order} />35      ))}36    </ul>37  );38}

Each kind of condition has a job:

• Lines 28 to 30 are an early return in App: with no orders, the page says No orders yet. and stops.
• Lines 7 to 15 are OrderActions, which decides for itself: a Cancel button while packing, Track once shipped, and null after delivery, when there's nothing to do.
• Line 21's ternary bolds delivered and shows the other statuses as they are. Line 22's && adds (gift) only when order.gift is true; it's a true-or-false value, so no stray 0.

The result shows #7 Tea: delivered with no button, #8 Cake: shipped (gift) with Track, and #9 Lemonade: packing with Cancel. Press Edit & run and replace lines 1 to 5 with const orders = [];. The result shows No orders yet. Lines 33 to 35 turn the array into rows with map and give each a key; the next lesson, Rendering lists, is all about that.

How to read this table: each row is something you want the page to do, what to write, and why it works.

Common mix-ups

• "React has a special tag for conditions." No. Some other libraries have one, like Vue's v-if. React uses plain JavaScript: if, ? :, and &&.
• "A component must always return some JSX." No. It can return null to show nothing, as SaleBanner and OrderActions do.
• "When the left side of && is false, nothing shows." Only when it's false, null, undefined, or an empty string. A 0 or NaN shows. Compare first: count > 0 && ….
• "A component that returns null is skipped." No. React still calls it; it just shows nothing. To keep React from calling it, leave it out in the parent.
• "Conditional rendering hides an element." No. It removes the element from the page, with anything typed into it. To keep it and only hide it, use the hidden attribute or CSS.
• "Two returns make different elements than one return with a ternary." No. JSX describes elements; for the same data both versions describe the same thing, and the page ends up the same.

Practice exercises

Each exercise shows its result under the code, or when you press Edit & run. Change the code, and the result updates as you type. For the first two, answer before you run anything.

function Inbox({ messages }) {
  return (
    <section>
      <h3>Inbox</h3>
      {messages.length && <p>You have {messages.length} new messages.</p>}
    </section>
  );
}

export default function App() {
  return <Inbox messages={[]} />;
}

1function Inbox({ messages }) {2  return (3    <section>4      <h3>Inbox</h3>5      {messages.length && <p>You have {messages.length} new messages.</p>}6    </section>7  );8}9 10export default function App() {11  return <Inbox messages={[]} />;12}

function Greeting({ user }) {
  if (!user) {
    return <p>Sign in to see your orders.</p>;
  }
  return <p>Welcome back, {user.name}!</p>;
}

export default function App() {
  return <Greeting user={null} />;
}

1function Greeting({ user }) {2  if (!user) {3    return <p>Sign in to see your orders.</p>;4  }5  return <p>Welcome back, {user.name}!</p>;6}7 8export default function App() {9  return <Greeting user={null} />;10}

1function CartLink({ count }) {2  return (3    <p>4      Cart {count && <strong>({count})</strong>}5    </p>6  );7}8 9export default function App() {10  return (11    <>12      <CartLink count={2} />13      <CartLink count={0} />14    </>15  );16}

1function CartLink({ count }) {2  return (3    <p>4      Cart {count > 0 && <strong>({count})</strong>}5    </p>6  );7}8 9export default function App() {10  return (11    <>12      <CartLink count={2} />13      <CartLink count={0} />14    </>15  );16}

1function Delivery({ name, express }) {2  if (express) {3    return <li>{name}: arrives tomorrow</li>;4  }5  return <li>{name}: arrives in 3 days</li>;6}7 8export default function App() {9  return (10    <ul>11      <Delivery name="Tea" express={true} />12      <Delivery name="Cake" express={false} />13    </ul>14  );15}

1function Delivery({ name, express }) {2  return <li>{name}: arrives {express ? "tomorrow" : "in 3 days"}</li>;3}4 5export default function App() {6  return (7    <ul>8      <Delivery name="Tea" express={true} />9      <Delivery name="Cake" express={false} />10    </ul>11  );12}

1// Write LowStockWarning here.2 3function ProductCard({ name, stock }) {4  return (5    <li>6      {name}7    </li>8  );9}10 11export default function App() {12  return (13    <ul>14      <ProductCard name="Tea" stock={5} />15      <ProductCard name="Cake" stock={2} />16      <ProductCard name="Lemonade" stock={0} />17    </ul>18  );19}

1function LowStockWarning({ stock }) {2  if (stock === 0 || stock >= 3) {3    return null;4  }5  return <strong> Only {stock} left!</strong>;6}7 8function ProductCard({ name, stock }) {9  return (10    <li>11      {name}12      <LowStockWarning stock={stock} />13    </li>14  );15}16 17export default function App() {18  return (19    <ul>20      <ProductCard name="Tea" stock={5} />21      <ProductCard name="Cake" stock={2} />22      <ProductCard name="Lemonade" stock={0} />23    </ul>24  );25}

1function ReviewList({ reviews }) {2  // reviews is null while loading, [] when there are none.3  return <p>{reviews?.length} reviews</p>;4}5 6export default function App() {7  return (8    <>9      <ReviewList reviews={null} />10      <ReviewList reviews={[]} />11      <ReviewList reviews={["Lovely tea", "Fresh cake"]} />12    </>13  );14}

1function ReviewList({ reviews }) {2  if (reviews === null) {3    return <p>Loading reviews…</p>;4  }5  if (reviews.length === 0) {6    return <p>No reviews yet.</p>;7  }8  return <p>{reviews.length} reviews</p>;9}10 11export default function App() {12  return (13    <>14      <ReviewList reviews={null} />15      <ReviewList reviews={[]} />16      <ReviewList reviews={["Lovely tea", "Fresh cake"]} />17    </>18  );19}

Check your understanding

For each code question, find the data first, then follow the condition. Press Edit & run on a question's code to check your answer.

Key takeaways

• React has no special syntax for conditions. A component chooses what to return with plain JavaScript.
• Use if before the return for whole different results, and early returns for special cases like an empty cart.
• Inside the JSX, a ? b : c picks one of two pieces, and a && b shows a piece or nothing. Give && a true-or-false test, like count > 0, or a 0 shows up.
• React shows nothing for null, false, true, and undefined. A component can return null, but React still calls it; leaving it out in the parent means React never does.
• A condition that turns false removes the element from the page, with anything typed into it. The hidden attribute only hides it.

Coming next: Rendering lists. It turns arrays of data into lists of components with map and filter, and shows why each item needs a key.