React / React Conditionals / Logical AND Operator
Home /React /React Conditionals /Logical AND Operator

Logical AND Operator

💻 React

Logical AND Operator &&

The logical AND operator (&&) renders the right-hand side only if the left-hand condition is truthy. If the condition is falsy, React renders nothing. It is the “show or nothing” pattern  a shorthand for condition ? <Element /> : null.

Basic && Usage

function Notifications({ count, isAdmin, hasError, user }) {
  return (
    <div>
      {/* Show badge only when count > 0 */}
      {count > 0 && (
        <span className="badge">{count} new</span>
      )}

      {/* Show admin panel only for admins */}
      {isAdmin && <AdminPanel />}

      {/* Show error message when error exists */}
      {hasError && (
        <div className="error-banner">
          Something went wrong. Please try again.
        </div>
      )}

      {/* Show welcome only when user name exists */}
      {user?.name && <p>Welcome, {user.name}!</p>}
    </div>
  );
}
The Zero Trap:If the left side is the number 0, React renders 0 visibly on screen instead of nothing! Use count > 0 && ... or !!count && ... to force a boolean. This is one of the most common React bugs.
function CartBadge({ itemCount }) {
  return (
    <div>
      {/* ❌ WRONG — renders "0" when itemCount is 0 */}
      {itemCount && <Badge>{itemCount}</Badge>}

      {/* ✓ CORRECT — explicit comparison returns true/false */}
      {itemCount > 0 && <Badge>{itemCount}</Badge>}

      {/* ✓ CORRECT — double bang converts to boolean */}
      {!!itemCount && <Badge>{itemCount}</Badge>}

      {/* ✓ CORRECT — ternary with null fallback */}
      {itemCount ? <Badge>{itemCount}</Badge> : null}
    </div>
  );
}