How do you conditionally render elements in React?

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 />;
  }
}