javascript / beginner
Snippet
Conditional Rendering with Logical AND
In JSX, the logical AND (&&) operator is a concise way to render an element only when a condition is true. If the condition is false, React skips the expression entirely.
snippet.js
javascript
1
2
3
4
5
6
7
export default function Welcome({ isLoggedIn }) {return (<div>{isLoggedIn && <p>Welcome back, user!</p>}</div>);}
nextjs
Breakdown
1
{isLoggedIn && ...}
Evaluates the variable. If true, it moves to the next part of the expression.
2
<p>Welcome back, user!</p>
The JSX element that will be rendered only if the preceding condition is true.