▶ App.tsx import './App.css'; import User from './components/state/User'; function App() { return ( <div className="App"> <User /> </div> ); } export default App; ---------------------------------------------------------------------------------------------------------- ▶ User.tsx import { useState } from "react" type AuthUser = { name: string, email: string } const User = () => { const [isLoggedIn, setIsLoggedIn] = useState<AuthUser | null>(null) const userLogin = () => { setIsLoggedIn({ name: 'Nel', email: 'nel@gmail.com' }) } const userLogout = () => { setIsLoggedIn(null) } return ( <div> <button onClick={userLogin}>Login</button> <button onClick={userLogout}>Logout</button> <p>{isLoggedIn ? `${isLoggedIn?.name} User is logged in` : 'User is logged out'}</p> </div> ) } export default User
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter