There are several ways to conditionally render elements:
1. Ternary Operator:
function Greeting({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
</div>
);
}
2. Logical AND (&&):
function Notification({ hasMessages }) {
return (
<div>
{hasMessages && <p>You have new messages!</p>}
</div>
);
}
3. If-else statements:
function UserStatus({ user }) {
if (user.isAdmin) {
return <AdminPanel />;
} else if (user.isLoggedIn) {
return <UserPanel />;
} else {
return <LoginForm />;
}
}