Short-Circuiting with Logical AND (&&)

Snippet

Short-Circuiting with Logical AND (&&)

In React, you can use the JavaScript logical AND operator (&&) to conditionally render elements. If the first condition is true, the element after && will be rendered; if false, React ignores it.

snippet.js

javascript

function Welcome({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
      <p>Enjoy your stay.</p>
    </div>
  );
}

react

Breakdown

{isLoggedIn && <h1>Welcome back!</h1>}

If isLoggedIn is true, the h1 tag is returned. If false, nothing is rendered for this expression.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Short-Circuiting with Logical AND (&&)

Related