Snippet

Conditional Rendering Using Inline Logical AND Operator

React allows conditional rendering using JavaScript's logical AND (&&) operator. When the left-side expression evaluates to true, the JSX on the right side is rendered; when false, React ignores it.

snippet.js

javascript

function NotificationBanner({ unreadCount }) {
  const hasMessages = unreadCount > 0;
  return (
    <div>
      {hasMessages && (
        <p className="badge">You have {unreadCount} new messages!</p>
      )}
    </div>
  );
}

react

Breakdown

const hasMessages = unreadCount > 0;

Evaluates a boolean condition checking whether there are unread messages.

{hasMessages && (

Uses the logical AND operator to conditionally evaluate and render the adjacent JSX markup.

<p className="badge">You have {unreadCount} new messages!</p>

Renders the message notification element only when hasMessages evaluates to true.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Conditional Rendering Using Inline Logical AND Operator

Related