React Logical && Rendering

React allows you to conditionally display elements using JavaScript’s logical AND operator, written as &&.

This technique is commonly called logical AND rendering or conditional rendering with &&.

It is useful when you want to display something only when a condition is true.

For example:

const isLoggedIn = true;

return (
  <div>
    {isLoggedIn && <h2>Welcome back!</h2>}
  </div>
);

When isLoggedIn is true, React renders:

Welcome back!

When isLoggedIn is false, the condition prevents the <h2> from being rendered.

The && pattern is simple, but understanding how JavaScript evaluates logical expressions is important before using it throughout a React application.

What Does && Mean in JavaScript?

The && operator is a JavaScript logical operator.

It evaluates two expressions:

A && B

The basic idea is:

If A is truthy, evaluate and return B.

For example:

true && "Hello"

produces:

Hello

But:

false && "Hello"

produces:

false

React uses this JavaScript behavior to conditionally render JSX.

How && Rendering Works in React

Consider:

{isLoggedIn && <Dashboard />}

There are two parts:

isLoggedIn

and:

<Dashboard />

If isLoggedIn is truthy, JavaScript evaluates the right side:

<Dashboard />

React then renders that JSX.

If isLoggedIn is falsy, JavaScript returns the falsy value, and React generally renders nothing for values such as false, null, and undefined.

So the pattern effectively means:

Condition is true
       ↓
Render the JSX

Condition is false
       ↓
Render nothing

This makes && particularly useful when there is no alternative UI.

Basic && Rendering Syntax

The basic pattern is:

{condition && <Element />}

For example:

const showMessage = true;

return (
  <div>
    {showMessage && <p>Hello from React!</p>}
  </div>
);

If showMessage is true, the paragraph appears.

If it is false, the paragraph does not appear.

Why Use && Instead of a Ternary?

Suppose you only want to show a notification when one exists.

Using &&:

{hasNotification && (
  <div>
    You have a new notification.
  </div>
)}

This is concise because there is no alternative content.

A ternary would require an unnecessary second branch:

{hasNotification ? (
  <div>
    You have a new notification.
  </div>
) : null}

Both can work, but && communicates the intention more directly:

If this condition is true, show this.

&& Rendering With Boolean Values

The most straightforward use of && is with a boolean variable.

const isAdmin = true;

return (
  <div>
    <h1>Dashboard</h1>

    {isAdmin && (
      <button>
        Open Admin Panel
      </button>
    )}
  </div>
);

When isAdmin is true, the button appears.

When it is false, the button is not rendered.

This pattern is common for:

• Admin controls
• Premium features
• Login-dependent content
• Optional buttons
• Notifications
• Error messages
• Success messages
• Additional information
• Navigation items

Rendering Components With &&

The right side of the expression can be an entire React component.

{isLoggedIn && <Dashboard />}

You can also render components that receive props:

{isAdmin && (
  <AdminPanel
    username={username}
  />
)}

The component is rendered only when the condition is truthy.

Rendering Multiple Elements

You can render multiple elements when the condition is true.

A Fragment can group them:

{isLoggedIn && (
  <>
    <h2>Welcome back!</h2>
    <p>You are currently logged in.</p>
    <button>View Profile</button>
  </>
)}

When isLoggedIn is true, all three elements are displayed.

When it is false, none of them are displayed.

You could also use a normal HTML element as the wrapper when a real container is needed:

{isLoggedIn && (
  <section className="user-panel">
    <h2>Welcome back!</h2>
    <p>You are currently logged in.</p>
  </section>
)}

Using && With Props

Props are often used as conditions.

function Profile({ isVerified }) {
  return (
    <div>
      <h2>Arafat</h2>

      {isVerified && (
        <span>Verified</span>
      )}
    </div>
  );
}

Use the component like this:

<Profile isVerified={true} />

The verification label appears.

With:

<Profile isVerified={false} />

the label does not appear.

This makes components flexible because the parent can control optional parts of the UI through props.

Using && With React State

State is another common source of conditions.

import { useState } from "react";

function Message() {
  const [showMessage, setShowMessage] = useState(false);

  return (
    <div>
      <button
        onClick={() => setShowMessage(!showMessage)}
      >
        Toggle Message
      </button>

      {showMessage && (
        <p>
          This message is visible.
        </p>
      )}
    </div>
  );
}

Initially:

showMessage = false

so the paragraph is not displayed.

After clicking the button:

showMessage = true

and React renders the paragraph.

When the state changes again, React updates the UI.

&& With Authentication

Authentication is one of the most common real-world uses.

function Header({ isLoggedIn }) {
  return (
    <header>
      <h1>My Website</h1>

      {isLoggedIn && (
        <button>
          Logout
        </button>
      )}
    </header>
  );
}

The logout button only appears for logged-in users.

You can also display additional account information:

{isLoggedIn && (
  <>
    <span>My Account</span>
    <button>Logout</button>
  </>
)}

&& With Admin Features

Suppose an application has an administrator-only section.

function Dashboard({ isAdmin }) {
  return (
    <main>
      <h1>Dashboard</h1>

      {isAdmin && (
        <section>
          <h2>Administration</h2>
          <button>Manage Users</button>
          <button>View Reports</button>
        </section>
      )}
    </main>
  );
}

Regular users will not see the admin section.

Administrators will.

However, this should only be treated as a UI visibility mechanism. Hiding a button in React does not provide security. Authorization must also be enforced on the server or other trusted backend layer.

&& With Notifications

Notifications are another excellent use case.

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

If there is a message:

<Notification message="Profile updated successfully." />

the notification appears.

If the message is empty:

<Notification message="" />

nothing is displayed.

&& With Error Messages

You can conditionally display errors.

function LoginForm({ error }) {
  return (
    <form>
      <input type="email" />
      <input type="password" />

      {error && (
        <p className="error">
          {error}
        </p>
      )}

      <button>
        Login
      </button>
    </form>
  );
}

When error contains a truthy value, the error message appears.

When there is no error, it disappears.

This is a common pattern for forms.

&& With Success Messages

The same pattern can display success messages.

{isSaved && (
  <p>
    Your changes have been saved.
  </p>
)}

The message appears only when isSaved is true.

&& With Loading Indicators

You can use && to show a loading indicator.

{loading && (
  <p>
    Loading...
  </p>
)}

When loading is true, the message appears.

However, if you need to show one thing while loading and another thing after loading, a ternary may be more appropriate:

{loading ? (
  <p>Loading...</p>
) : (
  <UserList />
)}

The distinction is important:

&&
Show something when true

Ternary
Show A when true
Show B when false

&& With Arrays

You can check whether an array contains items before rendering a section.

const courses = [
  "React",
  "JavaScript",
  "CSS"
];

return (
  <div>
    {courses.length > 0 && (
      <h2>Available Courses</h2>
    )}
  </div>
);

The heading appears only when the array contains at least one item.

You can combine this with .map():

{courses.length > 0 && (
  <ul>
    {courses.map((course) => (
      <li key={course}>
        {course}
      </li>
    ))}
  </ul>
)}

The Important 0 Problem

One of the most important things to understand about && rendering is what happens when the left side is 0.

Consider:

const count = 0;

return (
  <div>
    {count && <p>Items available</p>}
  </div>
);

You might expect React to render nothing.

But JavaScript evaluates:

0 && <p>Items available</p>

The result is:

0

React can render that 0 as text.

So the UI may display:

0

instead of nothing.

This is a common beginner mistake.

How to Avoid the 0 Problem

Instead of:

{count && <p>Items available</p>}

use an explicit comparison:

{count > 0 && (
  <p>
    Items available
  </p>
)}

Now the left side produces a boolean:

true

or:

false

This makes the intention clear.

You can also use:

{Boolean(count) && (
  <p>Items available</p>
)}

But an explicit comparison such as count > 0 is often clearer because it communicates exactly what the UI requires.

Other Falsy Values

JavaScript has several falsy values.

Common falsy values include:

false
0
""
null
undefined
NaN

This matters because && returns the left-hand value when it is falsy.

For example:

false && "Hello"

returns:

false

And:

"" && "Hello"

returns:

""

React generally renders nothing for values such as false, null, and undefined, but 0 is rendered as text.

This is why explicit boolean conditions are often safer when numbers or strings can be involved.

Truthy Values

JavaScript also has many truthy values.

Examples include:

true
"hello"
42
[]
{}

For example:

const username = "Arafat";

return (
  <div>
    {username && (
      <p>
        Welcome, {username}
      </p>
    )}
  </div>
);

Since "Arafat" is truthy, the paragraph is rendered.

This pattern is useful when checking whether optional data exists.

&& With Strings

You can use && with a string condition.

const message = "Welcome to React";

return (
  <div>
    {message && (
      <p>{message}</p>
    )}
  </div>
);

Since the string is non-empty, it is truthy and the paragraph appears.

However, be aware that an empty string is falsy:

const message = "";

{message && <p>{message}</p>}

The paragraph does not appear.

&& With Objects

Objects are truthy in JavaScript, including empty objects.

For example:

const user = {};

{user && (
  <p>User exists.</p>
)}

This condition is true because an empty object is truthy.

Therefore, if you need to determine whether an object contains meaningful data, simply checking the object may not be enough.

For example:

const user = null;

{user && (
  <p>{user.name}</p>
)}

Here the content does not render because user is null.

&& With Optional Data

A common use of && is checking whether optional data exists before displaying it.

function Profile({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>

      {user.bio && (
        <p>{user.bio}</p>
      )}
    </div>
  );
}

If the user has a bio, it is displayed.

If the bio is empty or another falsy value, the paragraph is not displayed.

Combining && With Other Conditions

You can combine multiple conditions.

For example:

{isLoggedIn && isAdmin && (
  <AdminPanel />
)}

The AdminPanel is rendered only when both conditions are truthy.

The logic is:

isLoggedIn
     AND
isAdmin
     ↓
Render AdminPanel

Another example:

{isLoggedIn && hasPermission && (
  <DeleteButton />
)}

The delete button appears only when the user is logged in and has permission.

Multiple Conditions With Parentheses

When conditions become longer, parentheses can make the logic easier to read.

{(
  isLoggedIn &&
  isAdmin &&
  hasPermission
) && (
  <AdminPanel />
)}

However, if the condition becomes complicated, consider calculating it before the JSX.

const canAccessAdmin =
  isLoggedIn &&
  isAdmin &&
  hasPermission;

return (
  <div>
    {canAccessAdmin && (
      <AdminPanel />
    )}
  </div>
);

This makes the JSX easier to understand.

&& With Function Calls

You can use a function result as the condition.

function hasAccess(user) {
  return user.role === "admin";
}

{hasAccess(user) && (
  <AdminPanel />
)}

The function returns a boolean.

If it returns true, the panel appears.

If it returns false, it does not.

For more complicated logic, it can be cleaner to calculate the result before the return statement:

const canAccess = hasAccess(user);

return (
  <div>
    {canAccess && <AdminPanel />}
  </div>
);

&& With Nested Components

You can conditionally render nested components.

{showProfile && (
  <Profile>
    {showDetails && (
      <ProfileDetails />
    )}
  </Profile>
)}

This works, but avoid creating deeply nested conditional structures.

If the logic becomes difficult to follow, break it into smaller components or variables.

&& and Event Handlers

The && operator can also be useful for conditionally rendering controls that perform actions.

{canEdit && (
  <button onClick={handleEdit}>
    Edit
  </button>
)}

The button only appears when the user has editing permission.

Again, this only controls the interface. It should not be considered a security mechanism by itself.

&& vs Ternary Operator

Understanding when to use each is important.

Use && for one-sided conditions

{isAdmin && <AdminPanel />}

Meaning:

If isAdmin is true,
show AdminPanel.
Otherwise, show nothing.

Use a ternary for two outcomes

{isAdmin ? <AdminPanel /> : <UserPanel />}

Meaning:

If isAdmin is true,
show AdminPanel.

Otherwise,
show UserPanel.

Use if for complex decisions

if (loading) {
  return <Loading />;
}

if (error) {
  return <Error />;
}

return <Content />;

There is no need to force every conditional into &&.

&& vs null

These two patterns can produce similar results:

{isVisible && <Modal />}

and:

{isVisible ? <Modal /> : null}

Both render the modal only when isVisible is true.

The && version is shorter and communicates the one-sided condition clearly.

Conditional CSS With &&

You can use && to conditionally add an extra element that provides styling or information.

<div className="card">
  <h2>React Course</h2>

  {isFeatured && (
    <span className="featured-badge">
      Featured
    </span>
  )}
</div>

The base card is always displayed.

The featured badge appears only when isFeatured is true.

Conditional Attributes Are Different

You can use && to render elements, but remember that attributes have their own behavior.

For example:

<button disabled={isDisabled}>
  Submit
</button>

You generally do not need:

<button disabled={isDisabled && true}>
  Submit
</button>

The simpler expression is clearer.

Use && primarily when you want to conditionally include JSX.

A Practical Example: Shopping Cart

Consider a shopping cart.

function Cart({ items }) {
  return (
    <div>
      <h1>Shopping Cart</h1>

      {items.length > 0 && (
        <p>
          You have items in your cart.
        </p>
      )}

      {items.length > 0 && (
        <button>
          Checkout
        </button>
      )}

      {items.length === 0 && (
        <p>
          Your cart is empty.
        </p>
      )}
    </div>
  );
}

The UI changes according to the number of items.

When the cart contains products:

Shopping Cart
You have items in your cart.
[Checkout]

When it is empty:

Shopping Cart
Your cart is empty.

Notice that we used explicit comparisons:

items.length > 0

and:

items.length === 0

This avoids accidentally rendering 0.

A Practical Example: User Dashboard

Here is another realistic example:

function Dashboard({
  isLoggedIn,
  isAdmin,
  hasNotifications
}) {
  return (
    <main>
      <h1>Dashboard</h1>

      {isLoggedIn && (
        <p>
          Welcome back!
        </p>
      )}

      {hasNotifications && (
        <div className="notification">
          You have new notifications.
        </div>
      )}

      {isAdmin && (
        <button>
          Admin Panel
        </button>
      )}

      {isLoggedIn && (
        <button>
          Logout
        </button>
      )}
    </main>
  );
}

Each section is independently controlled by a condition.

This makes && particularly useful when a page contains many optional pieces of UI.

A Practical Example: Product Availability

function ProductCard({ product }) {
  return (
    <article className="product-card">
      <h2>{product.name}</h2>

      <p>
        Price: ₹{product.price}
      </p>

      {product.available && (
        <span className="available">
          In Stock
        </span>
      )}

      {!product.available && (
        <span className="unavailable">
          Out of Stock
        </span>
      )}

      {product.available && (
        <button>
          Add to Cart
        </button>
      )}
    </article>
  );
}

Here, && is used for both positive and negative conditions.

The expression:

product.available && <button>Add to Cart</button>

shows the button when the product is available.

The expression:

!product.available && <span>Out of Stock</span>

shows the message when the product is unavailable.

Improving the Product Example

The previous example works, but if the interface has exactly two mutually exclusive states, a ternary may be clearer:

<span>
  {product.available
    ? "In Stock"
    : "Out of Stock"}
</span>

And:

{product.available && (
  <button>
    Add to Cart
  </button>
)}

This is a good example of choosing the appropriate conditional technique.

Use the ternary for the two possible labels.

Use && for the button that exists only in one state.

Common Mistakes

Expecting && to provide an Else Case

This:

{isLoggedIn && <Dashboard />}

does not provide alternative content.

If you need a login screen when false:

{isLoggedIn ? <Dashboard /> : <Login />}

Use a ternary.

Accidentally Rendering 0

Avoid:

{items.length && <ItemList items={items} />}

when items.length can be zero.

Prefer:

{items.length > 0 && (
  <ItemList items={items} />
)}

Using && for Complicated Logic

Avoid putting an extremely complicated condition directly into JSX:

{user &&
  user.account &&
  user.account.subscription &&
  user.account.subscription.active &&
  user.account.subscription.plan === "premium" &&
  user.account.subscription.expiry > Date.now() &&
  <PremiumFeatures />
}

This is difficult to read.

Calculate the condition first:

const hasPremiumAccess =
  user?.account?.subscription?.active &&
  user.account.subscription.plan === "premium" &&
  user.account.subscription.expiry > Date.now();

Then:

{hasPremiumAccess && (
  <PremiumFeatures />
)}

The JSX is now much easier to understand.

Assuming Every Falsy Value Renders Nothing

Remember that JavaScript’s && operator returns the actual falsy value.

For example:

0 && "Hello"

returns 0.

React can display that 0.

Therefore, understand the type of the condition before using it.

Using && When a Ternary Is Clearer

If the interface needs two different outcomes:

{isOnline ? <Online /> : <Offline />}

is clearer than trying to combine several && expressions.

Using UI Conditions as Security

This:

{isAdmin && <DeleteButton />}

hides the button from non-admin users.

But it does not prevent someone from directly calling an API or backend endpoint.

Authorization must be enforced on the server as well.

Best Practices

Use && for one-sided rendering

Good:

{isAdmin && <AdminPanel />}

Use explicit boolean conditions for numbers

Good:

{count > 0 && <ItemList />}

This is safer than:

{count && <ItemList />}

when count can be zero.

Give complex conditions meaningful names

Instead of:

{user?.role === "admin" &&
  user?.active &&
  user?.verified && (
    <AdminPanel />
  )}

use:

const canAccessAdmin =
  user?.role === "admin" &&
  user?.active &&
  user?.verified;

Then:

{canAccessAdmin && <AdminPanel />}

Keep JSX readable

If a condition requires many lines of logic, move it outside the JSX.

Choose the right conditional technique

Use:

&&
One condition, otherwise nothing

Ternary
Two possible outcomes

if
Complex rendering logic

&& Rendering Cheat Sheet

Situation	Example
Show when true	{isVisible && <Box />}
Show component	{isAdmin && <AdminPanel />}
Show text	{hasMessage && <p>{message}</p>}
Show button	{canEdit && <button>Edit</button>}
Show notification	{hasNotification && <Notification />}
Show list	{items.length > 0 && <List />}
Multiple conditions	{isLoggedIn && isAdmin && <Admin />}
Show multiple elements	{isOpen && <><A /><B /></>}
Show nothing when false	{condition && <Component />}
Avoid zero issue	{count > 0 && <List />}

Practice Exercise

Create a UserDashboard component with these values:

const user = {
  name: "Arafat",
  isLoggedIn: true,
  isAdmin: false,
  hasNotifications: true,
  hasPremium: true
};

The component should display:

• The user’s name.
• A welcome message when the user is logged in.
• A notification message when notifications exist.
• An Admin Panel button only for administrators.
• A Premium Features section only for premium users.
• A Logout button only when the user is logged in.

Use the logical && operator for the optional sections.

Then change:

isAdmin: true

and observe what changes.

Next, change:

hasNotifications: false

and verify that the notification disappears.

Finally, change:

isLoggedIn: false

and observe which parts of the interface are removed.

Where to Place an Image

Place this image after the section “How && Rendering Works in React”.

Create a 16:9 educational React infographic showing:

isAdmin = true
      │
      ▼
isAdmin && <AdminPanel />
      │
      ▼
   TRUE
      │
      ▼
<AdminPanel />
      │
      ▼
Rendered UI

Also show the false path:

isAdmin = false
      │
      ▼
isAdmin && <AdminPanel />
      │
      ▼
   FALSE
      │
      ▼
Nothing rendered

Use a polished modern React developer aesthetic, dark coding-editor background, clean JSX code, and a clear TRUE/FALSE visual flow.

Caption: Logical AND rendering with && in React

Alt text: React logical AND rendering showing a component rendered when a condition is true and nothing when false

Key Takeaways

• && is a JavaScript logical operator that can be used for conditional rendering in React.
• The basic pattern is {condition && <Component />}.
• When the condition is truthy, React evaluates and renders the JSX on the right.
• When the condition is false, null, or undefined, React generally renders nothing for that result.
• && is best when you want to display something only when a condition is true.
• It is commonly used with props, state, authentication, permissions, notifications, loading indicators, and optional content.
• Multiple conditions can be combined with &&.
• Fragments can be used when multiple elements need to appear together.
• Be especially careful when the left side can be 0, because React can render the 0.
• Explicit comparisons such as count > 0 are safer when working with numbers.
• Complex conditions are easier to understand when calculated before the JSX.
• Use a ternary when you need two different outcomes.
• Use if statements when rendering logic becomes complex.
• Hiding UI with && is not a security mechanism. Server-side authorization is still required.
• Good conditional rendering keeps React interfaces dynamic while keeping the JSX readable.

The core pattern to remember is:

{condition && <Component />}

It simply means:

If the condition is true, render the component. Otherwise, render nothing.

Once you understand how JavaScript’s && operator actually evaluates values, this becomes one of the simplest and most useful tools for conditional UI in React.