javascript / beginner
Snippet
Short-Circuit Rendering with &&
The logical AND (&&) operator is used to conditionally render elements. If the left side is true, it renders the right side; if false, it renders nothing.
snippet.js
javascript
1
2
3
4
5
6
7
8
const StatusLight = (props) => {return (<div>{props.isActive && <div className="green-dot" />}Active Status</div>);};
react
Breakdown
1
{props.isActive && <div ... />}
React evaluates the expression; the div is only created if props.isActive is truthy.