Conditional Rendering: The && Operator Tutorial

The logical AND (&&) operator is the most concise and idiomatic way to conditionally render a component only if a condition is true, or render nothing at all. Unlike the ternary operator, which chooses between two outcomes, the && pattern is perfect when you want to show something or nothing. This guide explains how it works, common pitfalls, and best practices.

Key Takeaways

condition && <Component /> renders the component only if the condition is truthy; renders nothing if falsy
Avoid the zero pitfall — never use a number as the left side of && because 0 && jsx evaluates to 0 and renders the number
Convert numbers to booleans — use count > 0 && instead of count && to avoid rendering 0
null returns nothing — returning null from a component renders nothing to the DOM
Use in JSX expressions — the pattern is most readable inline within JSX, not in complex logic

The Core Concept: The `&&` Operator in React

The && operator provides a clean syntax for conditional rendering when you want to include an element only if a condition is true. The pattern reads naturally: "if condition, then render component."

{condition && <SomeComponent />}

How JavaScript evaluates this:

If condition is falsy (false, 0, null, undefined, ""), the entire expression short-circuits and evaluates to that falsy value
React renders nothing when it encounters a falsy value in JSX
If condition is truthy, JavaScript evaluates the right side and returns the JSX element
React renders the returned JSX element

This behavior is built into JavaScript's evaluation rules, not something React invented. React simply respects JavaScript's truthiness rules and renders nothing for falsy values.

Practical Example: Showing an "Unread Messages" Badge

A common real-world use case is showing a notification badge only when there are unread messages. Here's a complete example:

// Mailbox component with conditional badge
import React from 'react';

function Mailbox({ unreadMessages }) {
  return (
    <div>
      <h1>Inbox</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
      <ul>
        {unreadMessages.map((msg, idx) => (
          <li key={idx}>{msg}</li>
        ))}
      </ul>
    </div>
  );
}

export default function App() {
  const messages = ['React Update', 'Re: React Update', 'Re:Re: React Update'];
  // Try changing to: const messages = [];

  return <Mailbox unreadMessages={messages} />;
}

How it works:

Condition: unreadMessages.length > 0 evaluates to true if the array has items, false if empty
Operator: && short-circuits if the condition is falsy
Component: If the condition is true, the <h2> element renders; if false, nothing renders

When you change messages to an empty array, the condition becomes false, and the <h2> disappears from the DOM entirely.

The Critical Pitfall: The Number Zero

This is the single most important caveat when using && for conditional rendering. Never put a number directly on the left side of the && operator.

Why this fails:

// WRONG - This renders the number 0 on the page!
function Mailbox({ messageCount }) {
  return (
    <div>
      <h1>Inbox</h1>
      {messageCount && <h2>You have {messageCount} new messages.</h2>}
    </div>
  );
}

// If messageCount is 0:
// JavaScript evaluates: 0 && <h2>...</h2>
// This returns: 0
// React renders: "0" as text on the page!

When messageCount is 0, the expression 0 && <h2>...</h2> evaluates to the number 0 because:

JavaScript short-circuits and returns the falsy left operand (0)
React renders falsy values as nothing—except for the number 0
React renders 0 as a text node on the page

This is a subtle but critical bug. Your UI literally displays a "0".

The correct approach:

Always ensure the left side of && is a boolean expression:

// CORRECT - Convert the number to a boolean condition
function Mailbox({ messageCount }) {
  return (
    <div>
      <h1>Inbox</h1>
      {messageCount > 0 && <h2>You have {messageCount} new messages.</h2>}
    </div>
  );
}

// If messageCount is 0:
// JavaScript evaluates: (0 > 0) && <h2>...</h2>
// This returns: false
// React renders: nothing

By using messageCount > 0, you create a true boolean comparison. If messageCount is 0, the condition evaluates to false, and React correctly renders nothing.

Other falsy values that are safe:

false — renders nothing (by design)
null — renders nothing (by design)
undefined — renders nothing (by design)
"" (empty string) — renders nothing (by design)

Only the number 0 (and NaN) are problematic because React treats them as values to render.

Alternative: Returning `null` from a Component

If you want a component to render nothing at all, you can return null directly from the component function. This is useful when the conditional logic is complex or when you want to keep the logic inside the component rather than in the parent.

// WarningBanner component that renders nothing when hidden
import React from 'react';

function WarningBanner({ showWarning }) {
  if (!showWarning) {
    return null; // Render nothing
  }

  return (
    <div className="warning" role="alert">
      Warning: This action cannot be undone.
    </div>
  );
}

export default function App() {
  const [show, setShow] = React.useState(true);

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        {show ? 'Hide' : 'Show'} Warning
      </button>
      <WarningBanner showWarning={show} />
    </div>
  );
}

When to use return null:

The conditional logic is complex and belongs inside the component
You want to explicitly signal that the component might render nothing
The component is responsible for its own visibility state

When to use the && operator:

The logic is simple and determined by a prop
You want to keep the JSX compact and inline
The parent component manages visibility

Both patterns are valid; choose based on clarity and where the logic belongs.

Frequently Asked Questions

Can I use `||` (OR) for conditional rendering?

The || operator also works but is less common. It renders the right side if the left is falsy: {!condition || <Component />}. This is harder to read than the && pattern. Stick with && for clarity unless you have a specific reason to use ||.

What other values are rendered as text in JSX?

Numbers (except 0, which has special handling) and strings render as text. true, false, null, and undefined render as nothing. If you want to display a boolean or null, convert it to a string: {String(value)}.

Can I use `&&` with multiple conditions?

Yes: {condition1 && condition2 && condition3 && <Component />}. All conditions must be truthy for the component to render. For clarity, consider combining conditions first: {(condition1 && condition2) && <Component />}.

Is the `&&` operator slower than a ternary operator?

No meaningful performance difference. Both compile to the same bytecode. Use whichever is clearer for your use case.

What if I want to render different content based on a condition, not just something or nothing?

Use the ternary operator: {condition ? <ComponentA /> : <ComponentB />}. The && pattern is specifically for "show or hide," not "show one of two options."

Key Takeaways​

The Core Concept: The && Operator in React​

Practical Example: Showing an "Unread Messages" Badge​

The Critical Pitfall: The Number Zero​

Alternative: Returning null from a Component​

Frequently Asked Questions​

Can I use || (OR) for conditional rendering?​

What other values are rendered as text in JSX?​

Can I use && with multiple conditions?​

Is the && operator slower than a ternary operator?​

What if I want to render different content based on a condition, not just something or nothing?​

Further Reading​