Skip to content
techsnow

JSX & Components

Conditional Rendering

function Greeting({ user }) {
  if (!user) return <p>Please log in.</p>;   // early return

  return (
    <div>
      <p>Welcome back, {user.name}!</p>
      {user.isAdmin && <a href="/admin">Admin panel</a>}
      <p>{user.premium ? "Premium member" : "Free plan"}</p>
    </div>
  );
}
PatternUse when
if + early returnWhole component changes
cond && <X/>Show something or nothing
cond ? <A/> : <B/>Choose between two things