condition && <Component /> takes advantage of how && evaluates in JavaScript: if condition is falsy, the whole expression short-circuits and evaluates to that falsy value directly, without ever evaluating the right-hand side at all, and React simply renders nothing for a falsy value like false, null, or undefined; if condition is truthy, the expression evaluates to the right-hand JSX, which React then renders normally. This is the standard, idiomatic pattern for rendering something only when a condition holds, with no corresponding else case to also handle, a common need for things like conditionally showing a badge, warning, or optional section.
1Understanding Conditional Rendering with the Logical && Operator
condition && <Component /> takes advantage of how && evaluates in JavaScript: if condition is falsy, the whole expression short-circuits and evaluates to that falsy value directly, without ever evaluating the right-hand side at all, and React simply renders nothing for a falsy value like false, null, or undefined; if condition is truthy, the expression evaluates to the right-hand JSX, which React then renders normally. This is the standard, idiomatic pattern for rendering something only when a condition holds, with no corresponding else case to also handle, a common need for things like conditionally showing a badge, warning, or optional section.
Watch out for using a number as the condition in condition && <Component />, since 0 is falsy but React actually renders the literal text '0' rather than nothing — use condition > 0, or Boolean(condition), instead of relying on a raw number directly as the condition to avoid this specific pitfall.
function Notifications({ count }) {
return (
<div>
<h2>Inbox</h2>
{count > 0 && <span className="badge">{count} new</span>}
</div>
);
}2Practical Example
Here is a real-world application of Conditional Rendering with the Logical && Operator showing how it is used in production React code.
function Cart({ itemCount }) {
return <p>{itemCount && `You have ${itemCount} items.`}</p>;
}
// With itemCount = 0:3Best Practices
Follow these guidelines when working with Conditional Rendering with the Logical && Operator:
1. Use && specifically for a one-sided conditional, rendering something only when true with no corresponding else case needed, rather than a ternary's two-way choice
2. Convert a numeric condition to an actual boolean first, like count > 0 or Boolean(count), rather than using the raw number directly, since a falsy 0 would otherwise render as the literal text '0'
3. Switch to a ternary or if/else once you need to render something specific for both the true and false cases, since && only handles the true case, rendering nothing for false
Tip: Watch out for using a number as the condition in condition && <Component />, since 0 is falsy but React actually renders the literal text '0' rather than nothing — use condition > 0, or Boolean(condition), instead of relying on a raw number directly as the condition to avoid this specific pitfall.
function Notifications({ count }) {
return (
<div>
<h2>Inbox</h2>
{count > 0 && <span className="badge">{count} new</span>}
</div>
);
}