Conditional Rendering in React

Conditional rendering means showing different UI depending on some condition — a loading state, whether a user is logged in, whether a list is empty. Because JSX is just JavaScript, you don't need a special templating syntax for this; you use ordinary JavaScript conditional constructs directly inside or around your JSX.

The two most common patterns are the ternary operator for choosing between two alternatives, and the logical AND (&&) operator for rendering something only when a condition is true, with nothing rendered otherwise.

Why it matters

Interfaces change with their data: a spinner while loading, an error message on failure, a different menu for a signed-in user. In React this is ordinary JavaScript inside the component, and knowing the three or four standard patterns, and the one trap with &&, covers every case.

Ternary Operator for Either/Or Rendering

When you need to render one of exactly two possible outputs, the ternary operator condition ? <ThenThis /> : <ElseThis /> fits neatly inside curly braces because, unlike an if/else statement, a ternary is a single expression that evaluates to a value.

Logical AND for Optional Rendering

When there is no "else" case — you either show something or show nothing — the && operator is more concise: {isLoggedIn && <WelcomeBanner />} renders the banner only when isLoggedIn is truthy. Because && returns its left operand when that operand is falsy, care is needed with numeric values: {count && <List />} would render the literal number 0 to the page when count is 0, since 0 is falsy but not undefined.

Early Returns and Variable-Based Rendering

For more complex logic, it is often clearer to compute the JSX to render into a variable before the return statement, or to return early from the component function entirely for special cases like a loading or error state, keeping the main return statement focused on the "happy path" UI.

• Use a ternary for exactly two branches directly inside JSX.
• Use && for "render this, or render nothing" cases, guarding against falsy-but-not-boolean values like 0 or an empty string.
• Use an early return at the top of the component for entirely different UI states, such as a loading spinner or an error message.

Example

function OrderStatus({ isLoading, isPaid, itemCount }) {
  if (isLoading) {
    return <p>Loading order...</p>;
  }

  return (
    <div>
      <p>{isPaid ? 'Payment received' : 'Payment pending'}</p>
      {itemCount > 0 && <p>{itemCount} item(s) in this order.</p>}
    </div>
  );
}

export default function App() {
  return <OrderStatus isLoading={false} isPaid={true} itemCount={3} />;
}

Because isLoading is false, the early-return loading message is skipped; the ternary renders "Payment received" (isPaid is true); and since itemCount (3) is greater than 0, "3 item(s) in this order." is also rendered below it.

Exercise

Do this in src/App.jsx of a Vite + React project. Write a Status component with three props. If loading is true it returns a paragraph reading Loading. Otherwise it shows either "Welcome back" or "Please sign in", depending on isLoggedIn, and, only when unread is greater than zero, a line with the number of new messages.

Expected result: with loading false, isLoggedIn true and unread 3, the page shows "Welcome back" and "3 new messages"; with unread 0, the second line is absent and no stray 0 is shown.

function Status({ loading, isLoggedIn, unread }) {
  // TODO: early return while loading

  return (
    <div>
      {/* TODO: one of two messages, depending on isLoggedIn */}
      {/* TODO: the unread line, only when unread > 0 */}
    </div>
  );
}

export default function App() {
  return <Status loading={false} isLoggedIn={true} unread={3} />;
}

function Status({ loading, isLoggedIn, unread }) {
  if (loading) {
    return <p>Loading</p>;
  }

  return (
    <div>
      <p>{isLoggedIn ? "Welcome back" : "Please sign in"}</p>
      {unread > 0 && <p>{unread} new messages</p>}
    </div>
  );
}

export default function App() {
  return <Status loading={false} isLoggedIn={true} unread={3} />;
}

Quick quiz

Interview questions