Short-Circuit Rendering with &&

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
const StatusLight = (props) => {
  return (
    <div>
      {props.isActive && <div className="green-dot" />}
      Active Status
    </div>
  );
};

react

Breakdown

{props.isActive && <div ... />}

React evaluates the expression; the div is only created if props.isActive is truthy.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Short-Circuit Rendering with &&

Related