Logical AND rendering in React

Introduction

Logical AND rendering helps show something only when a condition is true. It keeps your UI clean and simple.

Show a message only if a user is logged in.

Display a loading spinner only while data is loading.

Render a warning only if a form input is invalid.

Show extra details only when a checkbox is checked.

Syntax

React

condition && <JSX_element />

If condition is true, the JSX element after && shows.

If condition is false, nothing shows (renders false which React ignores).

Examples

Shows "Welcome back!" only if isLoggedIn is true.

React

const isLoggedIn = true;
return (
  <div>
    {isLoggedIn && <p>Welcome back!</p>}
  </div>
);

Does not show anything because hasError is false.

React

const hasError = false;
return (
  <div>
    {hasError && <p>Error occurred.</p>}
  </div>
);

Shows message only if count is more than zero.

React

const count = 3;
return (
  <div>
    {count > 0 && <p>You have {count} new messages.</p>}
  </div>
);

Sample Program

This React component uses logical AND rendering to show different messages based on login state. Clicking the button toggles login status. When logged in, it shows a welcome message. When logged out, it asks the user to log in.

The button has aria-pressed for accessibility to indicate toggle state.

React

import React, { useState } from 'react';

export default function LogicalAndExample() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <main>
      <button onClick={() => setIsLoggedIn(!isLoggedIn)} aria-pressed={isLoggedIn}>
        {isLoggedIn ? 'Log out' : 'Log in'}
      </button>

      {/* Show greeting only if logged in */}
      {isLoggedIn && <p>Welcome back, friend!</p>}

      {/* Show prompt only if not logged in */}
      {!isLoggedIn && <p>Please log in to continue.</p>}
    </main>
  );
}

Important Notes

Logical AND rendering works well for simple show/hide cases.

Be careful: if the left side is a number 0, it will render 0 instead of hiding.

For more complex conditions, consider using ternary operators.

Summary

Logical AND rendering shows JSX only if a condition is true.

It keeps UI code clean and easy to read.

Use it for simple conditional display in React components.