React Conditionals

React Conditionals

Conditional rendering in React operates the exact same way conditions work in plain JavaScript. Use JavaScript operators to create elements representing the current state, and let React update the UI to match them seamlessly.

Logical && Operator

You can embed conditional logic directly in JSX by wrapping expressions in curly braces. The logical && operator is particularly handy for conditionally rendering an element only when a condition is inherently true.

function Mailbox({ unreadMessages }) {
  return (
    <div>
      {unreadMessages.length > 0 && <h2>You have {unreadMessages.length} unread messages.</h2>}
    </div>
  );
}