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>
);
}| Pattern | Use when |
|---|---|
if + early return | Whole component changes |
cond && <X/> | Show something or nothing |
cond ? <A/> : <B/> | Choose between two things |