The logical AND operator (`&&`) is useful when a piece of UI should appear only when a condition is true. ### Basic Example ```jsx function Notification({ hasNotification }) { return (

{hasNotification && (

You have a new notification.

)}

); } ``` If: ```text hasNotification = true ``` [React](/courses/reactjs) receives the `

` element. If the condition is false, that element is not rendered. ### Why Does This Work? In [JavaScript](/courses/javascript): ```text true && value → value false && value → false ``` So: ```jsx isAdmin && ``` means: ```text If isAdmin is truthy → render AdminButton Otherwise → do not render AdminButton ``` ### Good Use Cases Logical AND is useful for optional UI such as: ```jsx {error && } ``` ```jsx {isAdmin && } ``` ```jsx {items.length > 0 && } ``` ```jsx {showHelp && } ``` ### Important Beginner Pitfall with Numbers Be careful with this: ```jsx {items.length && } ``` If `items.length` is `0`, [JavaScript](/courses/javascript) evaluates the expression to: ```text 0 ``` and [React](/courses/reactjs) can render that `0`. A clearer condition is: ```jsx {items.length > 0 && ( )} ``` Now the left side is always a boolean. ### When Should You Use && Instead of a Ternary? Use `&&` when you only have a true case: ```text If true → show something If false → show nothing ``` Use a ternary when both outcomes have UI: ```text If true → show A If false → show B ``` ### Interview-Ready Answer Logical AND conditional rendering is useful when JSX should appear only if a condition is truthy. The expression `condition && ` returns the component when the condition is true and renders nothing useful when it is false. Boolean conditions are preferable because values such as `0` can otherwise appear unexpectedly in the UI.