Conditional Rendering

Conditional rendering means showing different UI depending on a condition. Use && to show something or nothing, and a ternary (? :) to choose between two options.

function Status({ isLoggedIn, messages }: { isLoggedIn: boolean; messages: number }) {
  return (
    <div>
      {/* Either / or */}
      {isLoggedIn ? <p>Welcome back!</p> : <button>Log in</button>}

      {/* Show only if true */}
      {messages > 0 && <p>You have {messages} new messages</p>}
    </div>
  )
}

// Early return
if (loading) return <p>Loading...</p>