React doesn't have special directives like v-if. Instead, you use plain JavaScript:
Patterns
// Ternary
{isLoggedIn ? <Dashboard /> : <LoginForm />}
// && short-circuit (render or nothing)
{showBanner && <Banner />}
// Early return
if (isLoading) return <Spinner />;
Your Task
Build a login/logout toggle:
- Track
isLoggedIn state, starting as false
- When logged out:
- Show
<p id="status"> with text "Please log in"
- Show a button with id
"login-btn" and text "Log In"
- When logged in:
- Show
<p id="status"> with text "Welcome back!"
- Show a button with id
"logout-btn" and text "Log Out"
- Add a
<span id="badge"> that only appears when logged in, containing "Online"