Logical AND Operator in React

The `&&` operator is one of the most elegant ways to conditionally render elements in React. It's concise, readable, and perfect for situations where you want to render something OR nothing at all.

How the && Operator Works

In JavaScript, the `&&` operator returns the first falsy value it encounters, or the last value if all are truthy. In React, this behavior is used to conditionally include JSX:

{condition && <Component />}

If `condition` is true, the `&&` operator evaluates to the right side (the component), and React renders it. If `condition` is false, the `&&` operator short-circuits and returns `false`, and React renders nothing.

The && operator is perfect for "if" conditions, but not for "if-else" – for those, use the ternary operator.

Simple Examples

function UserBadge({ user }) {
  return (
    <div>
      <span>{user.name}</span>
      {user.isAdmin && <span className="admin-badge">Admin</span>}
      {user.isVerified && <span className="verified-badge">✓ Verified</span>}
    </div>
  );
}

This renders admin and verified badges only if the corresponding conditions are true.

Common Use Cases

1. Displaying Messages

function Notification({ message }) {
  return (
    <div>
      {message && (
        <div className="notification">{message}</div>
      )}
    </div>
  );
}

2. Loading States

function DataDisplay({ data, loading }) {
  return (
    <div>
      {loading && <Spinner />}
      {!loading && data && <DataTable data={data} />}
    </div>
  );
}

3. Conditional CSS Classes

function TodoItem({ todo }) {
  return (
    <li className={`todo-item ${todo.completed && 'completed'}`}>
      {todo.text}
    </li>
  );
}

4. Rendering Lists with Fallback

function ItemList({ items }) {
  return (
    <div>
      {items.length > 0 ? (
        <ul>
          {items.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
      ) : (
        <p>No items found</p>
      )}
    </div>
  );
}

Notice we used a ternary here because we have both a "if" and "else" case.

Important Pitfall: Falsy Values

Be careful with falsy values like `0`. React will render the number `0` if the condition evaluates to `0`:

<!-- This will render '0' if items.length is 0 -->
{items.length && <List items={items} />}

This happens because when `items.length` is `0` (falsy), `&&` returns `0`, and React renders it. To avoid this, always use a boolean condition:

{items.length > 0 && <List items={items} />}

Real-World Example: E-commerce Product Card

function ProductCard({ product }) {
  return (
    <div className="product-card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      
      {product.discount > 0 && (
        <span className="discount-badge">
          Save {product.discount}%
        </span>
      )}
      
      {product.inStock ? (
        <button className="btn-primary">Add to Cart</button>
      ) : (
        <button className="btn-disabled" disabled>Out of Stock</button>
      )}
      
      {product.freeShipping && (
        <span className="free-shipping">🚚 Free Shipping</span>
      )}
    </div>
  );
}

Two Minute Drill

The `&&` operator is used for conditional rendering when you want to show something OR nothing.

Syntax: `{condition && }`

Perfect for: badges, messages, loading indicators, optional UI elements.

Not for if-else situations – use ternary operator for those.

Be careful with falsy values like `0` – always use boolean conditions (`array.length > 0` not just `array.length`).

The `&&` operator makes your code concise and readable when used appropriately.

Practice Exercises Interview Questions Take Quiz

Need more clarification?

Drop us an email at career@quipoinfotech.com

Welcome to Quipoin

Quipoin Menu

Logical AND Operator in React

Need more clarification?