Conditional Rendering

Conditional rendering means choosing what to display by checking application data.

Example — Pizza Availability

const availableCount = 10;

function App() {
  return (
    <div>
      <h2>Margherita</h2>
      <p>
        {availableCount > 0 ? "Available to order" : "Sold out"}
      </p>
    </div>
  );
}

export default App;

Browser Result

localhost:5173

Margherita

Available to order

availableCount > 0 checks whether at least one pizza can be ordered.

If the condition is true, React displays:

Available to order

Otherwise, it displays:

Sold out

The interface now responds to menu data.

---

Use the logical AND operator && when content should appear only if a condition is true.

Syntax

{condition && <Element />}

Remember: true → render the element; false → render nothing.

Example — Discount Badge

const discount = 20;

function App() {
  return (
    <div>
      <h2>Family Pizza</h2>

      {discount > 0 && (
        <p>Discount: {discount}%</p>
      )}
    </div>
  );
}

export default App;

Browser Result

localhost:5173

Family Pizza

Discount: 20%

Because 20 > 0 is true, the discount appears. If discount becomes 0, the paragraph disappears.

The expression must be inside JSX curly braces:

{discount > 0 && <p>Special offer!</p>}

---

Sometimes a condition is already stored as a boolean.

const isChefSpecial = true;

function App() {
  return (
    <div>
      <h2>Truffle Pizza</h2>

      {isChefSpecial && <p>Chef's special</p>}
    </div>
  );
}

export default App;

Browser Result

localhost:5173

Truffle Pizza

Chef's special

isChefSpecial already contains true, so this is enough:

isChefSpecial && <p>Chef's special</p>

Writing isChefSpecial === true is valid but unnecessary.

---

A pizza-ordering website may greet a returning customer.

const isLoggedIn = true;

function App() {
  return (
    <div>
      <h1>Pizza Palace</h1>

      {isLoggedIn && <p>Welcome back! Your saved addresses are ready.</p>}
    </div>
  );
}

export default App;

Browser Result

localhost:5173

Pizza Palace

Welcome back! Your saved addresses are ready.

If isLoggedIn becomes false, the welcome message disappears.

Important Security Note

Conditional rendering controls the visible interface. It does not protect private data by itself.

Authentication, account data, order history, admin actions, and protected prices must also be secured by the backend. Hiding a button in React is not authorization.

---

Use the ternary operator when there are two possible results.

Syntax

{condition ? resultIfTrue : resultIfFalse}

Example — Customer Message

const isLoggedIn = false;

function App() {
  return (
    <div>
      <h1>Pizza Palace</h1>

      <p>
        {isLoggedIn ? "Welcome back!" : "Log in to view previous orders"}
      </p>
    </div>
  );
}

export default App;

Browser Result

localhost:5173

Pizza Palace

Log in to view previous orders

Because isLoggedIn is false, React displays the expression after :.

---

Both operators can control rendered content, but they solve different problems.

Use && for One Optional Result

{hasFreeDelivery && <p>Free delivery!</p>}

If the condition is false, nothing is displayed.

Use a Ternary for Two Results

{isAvailable ? (
  <button>Add to cart</button>
) : (
  <p>Sold out</p>
)}

One of the two branches is rendered.

Browser Result

localhost:5173

Free delivery!

Add to cart

---

A condition can choose between entire groups of JSX elements.

Example — Cart Summary

interface CartSummaryProps {
  customerName: string;
  items: string[];
}

function CartSummary(props: CartSummaryProps) {
  return (
    <section>
      <h2>Hello {props.customerName}</h2>

      {props.items.length > 0 ? (
        <>
          <p>You have {props.items.length} pizzas in your cart.</p>
          <p>Review the order before checkout.</p>
          <button>Open cart</button>
        </>
      ) : (
        <p>Your cart is empty.</p>
      )}
    </section>
  );
}

export default CartSummary;

Usage:

<CartSummary
  customerName="Nikita"
  items={["Margherita", "Pepperoni"]}
/>

Browser Result

localhost:5173/cart

Hello Nikita

You have 2 pizzas in your cart.

Review the order before checkout.

Open cart

When the array contains items, React displays two paragraphs and a button. When it is empty, React displays only Your cart is empty.

The Fragment <></> groups several elements without adding another HTML wrapper.

---

React does not display false, null, or undefined as visible text when they are JSX children.

function App() {
  return (
    <div>
      {false}
      {null}
      {undefined}

      <p>Choose your pizza!</p>
    </div>
  );
}

Browser Result

localhost:5173

Choose your pizza!

Only Choose your pizza! is visible.

Returning null from a Component

A component can return null when it should display nothing.

interface OrderNoticeProps {
  visible: boolean;
}

function OrderNotice(props: OrderNoticeProps) {
  if (!props.visible) {
    return null;
  }

  return <p>Your order was added to the kitchen queue.</p>;
}

export default OrderNotice;

Browser Result when visible is true

localhost:5173/order

Your order was added to the kitchen queue.

<OrderNotice visible={false} /> displays nothing. With visible={true}, React displays the message.

---

Using a number directly on the left side of && can display an unwanted zero.

Potential Problem

const cartItems: string[] = [];

function App() {
  return (
    <div>
      {cartItems.length && <p>Your cart contains pizzas.</p>}
    </div>
  );
}

For an empty array, cartItems.length is 0. The expression returns 0, and React can display it.

Correct Solution

{cartItems.length > 0 && <p>Your cart contains pizzas.</p>}

Browser Result with an empty cart

localhost:5173/cart

The explicit comparison produces true or false.

Rule: when using && with a number, write a boolean comparison such as count > 0.

---

Reusable components can receive conditions through props.

interface PizzaCardProps {
  name: string;
  availableCount: number;
}

function PizzaCard(props: PizzaCardProps) {
  return (
    <article>
      <h2>{props.name}</h2>

      <p>
        {props.availableCount > 0 ? "Available" : "Sold out"}
      </p>
    </article>
  );
}

export default PizzaCard;

Usage:

<PizzaCard name="Margherita" availableCount={10} />
<PizzaCard name="Truffle Pizza" availableCount={0} />

Browser Result

localhost:5173/menu

Margherita

Available

Truffle Pizza

Sold out

The same component displays different messages because each instance receives different props.

---

Conditions can depend on React state.

Example — Show or Hide Ingredients

import { useState } from "react";

export default function PizzaDetails() {
  const state = useState(false);
  const showIngredients = state[0];
  const setShowIngredients = state[1];

  function toggleIngredients() {
    setShowIngredients(!showIngredients);
  }

  return (
    <section>
      <h2>Margherita</h2>

      <button onClick={toggleIngredients}>
        {showIngredients ? "Hide ingredients" : "Show ingredients"}
      </button>

      {showIngredients && (
        <p>Tomato, mozzarella, and basil</p>
      )}
    </section>
  );
}

Browser Result after selecting Show ingredients

localhost:5173/menu/margherita

Margherita

Hide ingredients

Tomato, mozzarella, and basil

Initially, showIngredients is false. Clicking the button reverses the boolean value, React renders again, and the ingredients appear. Clicking again hides them.

---

Conditional rendering does not always require && or a ternary. Ordinary JavaScript if statements are often clearer for early returns.

interface AddToCartButtonProps {
  availableCount: number;
}

function AddToCartButton(props: AddToCartButtonProps) {
  if (props.availableCount === 0) {
    return <p>Sold out</p>;
  }

  return <button>Add to cart</button>;
}

export default AddToCartButton;

Browser Result when availableCount is 0

localhost:5173/menu

Sold out

If the count is zero, the function returns the sold-out message immediately. Otherwise, it returns the button.

Use an if statement when it makes the component easier to read.

---

At checkout, Pizza Palace can display different instructions for delivery and pickup.

interface FulfilmentMessageProps {
  method: "delivery" | "pickup";
  address?: string;
}

function FulfilmentMessage(props: FulfilmentMessageProps) {
  return (
    <section>
      <h2>Order method</h2>

      {props.method === "delivery" ? (
        <p>We will deliver to: {props.address ?? "Address required"}</p>
      ) : (
        <p>Your order will be ready for pickup at Pizza Palace.</p>
      )}
    </section>
  );
}

export default FulfilmentMessage;

Usage:

<FulfilmentMessage
  method="delivery"
  address="12 Market Street"
/>

Browser Result

localhost:5173/checkout

Order method

We will deliver to: 12 Market Street

This demonstrates UI behavior. A real ordering system must also validate the address and allowed delivery area on the backend.

---

Mistake 1 — Double Curly Braces

Incorrect:

{{availableCount > 0 ? "Available" : "Sold out"}}

Correct:

{availableCount > 0 ? "Available" : "Sold out"}

Mistake 2 — Assignment Instead of a Condition

Incorrect:

{isChefSpecial = true && <p>Chef's special</p>}

Correct:

{isChefSpecial && <p>Chef's special</p>}

The assignment operator = changes a value. It is not a comparison.

Mistake 3 — Missing Colon in a Ternary

Incorrect:

{isAvailable ? "Add to cart"}

Correct:

{isAvailable ? "Add to cart" : "Sold out"}

Mistake 4 — Several Elements Without a Wrapper

Incorrect:

{isLoggedIn ? (
  <p>Welcome back</p>
  <button>View previous orders</button>
) : (
  <p>Please log in</p>
)}

Correct:

{isLoggedIn ? (
  <>
    <p>Welcome back</p>
    <button>View previous orders</button>
  </>
) : (
  <p>Please log in</p>
)}

Mistake 5 — A Number Directly with &&

Potentially problematic:

{cartCount && <p>Items in cart</p>}

Better:

{cartCount > 0 && <p>Items in cart</p>}

---

Exercise 1 — Discount Badge

Create const discount = 20 and display Special discount: 20% only when the discount is greater than zero. Use &&.

Exercise 2 — Customer Message

Create const isLoggedIn = false. Display Welcome back! when true and Please log in when false. Use a ternary.

Exercise 3 — Pizza Availability

Create const availableCount = 0. Display Available to order when the count is greater than zero and Sold out otherwise.

Exercise 4 — Optional Order Notice

Create an OrderNotice component with a visible: boolean prop. Return null when visible is false.

Exercise 5 — PizzaCard Component

Create a reusable component receiving:

interface PizzaCardProps {
  name: string;
  price: number;
  isAvailable: boolean;
}

Display the pizza name and price. Use isAvailable to show either an Add to cart button or a Sold out message.

Exercise 6 — Delivery Choice

Create a state value that switches between delivery and pickup. Render the correct checkout instructions for the selected method.

---

• Conditional rendering lets React choose content based on application data.
• Use && when content appears only for a true condition.
• Use ? : to choose between two results.
• Use an if statement when an early return is easier to read.
• JSX conditional expressions use one pair of curly braces.
• React does not display false, null, or undefined as visible children.
• A component can return null to display nothing.
• Compare numbers explicitly before using them with &&.
• Conditions can use props or state.
• Conditional rendering does not replace backend authorization or validation.

---

• React: Conditional Rendering
• React documentation
• MDN: Logical AND
• MDN: Conditional operator

Next lesson: Rendering Collections in React with .map() and key, using the Pizza Palace menu and cart.