useState with future value

▶ 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