javascript / beginner
Snippet
Conditional Rendering with &&
The logical AND (&&) operator is a common pattern in React and Next.js for conditional rendering. If the left side is true, the right side (the JSX) is rendered.
snippet.js
javascript
1
2
3
4
5
6
7
export default function UserProfile({ isLoggedIn }) {return (<div>{isLoggedIn && <button>Logout</button>}</div>);}
nextjs
Breakdown
1
{isLoggedIn && <button>Logout</button>}
If isLoggedIn is true, the button is rendered. If false, nothing is displayed.