عرض عنصر حسب شرط داخل JSX

import { useState } from "react";
export default function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  return <><p>{loggedIn ? "Welcome" : "Please Sign In"}</p><button onClick={() => setLoggedIn(value => !value)}>Toggle</button></>;
}