Login and Logout is not toggling in header of react js

Question

I am new to react, I have tried some basic react js login and logout page in react js. Login is working fine but after login I can't able to toggle the login to logout in the header. I also tried to use context to declare the global state but even though state is changing from 0 to 1 after that login header is not toggling to logout in header. Please help me to toggle from login to logout after successful login. I have also attached my code.

App.js

import React, { useState } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from './components/Header';
import AppContext from './components/AppContext';

function App() {

  const [LoggedIn, setLoggedIn] = useState(0);
  const globalState = {
    Logged: LoggedIn,
  };


  return (
    <div className="App">
      <AppContext.Provider value={globalState}>
        <Header />
      </AppContext.Provider>

    </div>
  );

}

export default App;

Header.js

import React, { useState, useContext } from 'react';
import AppContext from './AppContext';
import { Link, BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Login from './Login';
import UserPage from './UserPage';

function Header(props) {

    const Logg = useContext(AppContext);
    return (

        <div>

            <BrowserRouter>
                {Logg.Logged ?
                    <>
                        <Link to="/" style={{ paddingRight: '60px', paddingLeft: '950px' }}>Home</Link>
                        <Link to="/about" style={{ paddingRight: '60px' }}>About</Link>
                        <Link to="/" style={{ paddingRight: '60px' }}>Log out</Link>
                    </>
                    :
                    <>
                        <Link to="/" style={{ paddingRight: '60px', paddingLeft: '950px' }}>Home</Link>
                        <Link to="/about" style={{ paddingRight: '60px' }}>About</Link>
                        <Link to="/login" style={{ paddingRight: '60px' }}>Login</Link>
                    </>
                }
                <Routes>
                    <Route path='/' element={<Home />} />
                    <Route path='/login' element={<Login />} />
                    <Route path='/about' element={<About />} />
                    <Route path='/userprofile' element={<UserPage />} />
                </Routes>
            </BrowserRouter>
        </div>


    )
};


export default Header;

Login.js

import React, { useState, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import '../App.css'
import Header from './Header';
import UserPage from './UserPage';
import AppContext from './AppContext';

function Login(props) {

    let navi = useNavigate();
    const [name, setName] = useState();
    const [password, setPassword] = useState();
    const [message, setMessage] = useState();
    const Logg = useContext(AppContext);


    const database = [
        {
            name: "piranesh",
            password: "12"
        }
    ];

    function handleSubmit(event) {

        event.preventDefault();
        const userData = database.find((n) => n.name === name);
        if (userData) {
            if (userData.password === password) {
                Logg.Logged = 1;
                navi('/userprofile');
            }
            else {
                setMessage("Invalid username or Password");
            }
        }
        else {
            setMessage("Invalid username or Password");
        }
        setName("");
        setPassword("");


    }
    return (
        <div style={{ paddingTop: "150px" }}>
            <h4>Login</h4>
            <form onSubmit={handleSubmit}>
                <h3>{message}</h3>
                <table className="center">
                    <tr>
                        <th><label >User Name : </label></th>
                        <th><input type="text" name="name" value={name} placeholder="Enter your user name" onChange={(event) => setName(event.target.value)} /><br /></th>
                    </tr>
                    <tr>
                        <th><label >Password : </label></th>
                        <th><input type="password" name="password" value={password} placeholder="Enter your password" onChange={(event) => setPassword(event.target.value)} /><br /></th>
                    </tr>
                    <tr>
                        <th><button type="submit">Log in</button></th>
                    </tr>
                </table>
            </form>

        </div>

    );
}

export default Login;

UserPage.js

import React from 'react';



function UserPage(props) {

    return (

        <div>
            <h1>Hello this is User Page </h1>
        </div>
    )
};

export default UserPage;

Thanks.

Answer 1

You have to change the LoggedIn state in App.JS while user logged in. Now your changing the global reference it not re-render the component. That's why the header is not toggling.

App.js

  function App() {

  const [LoggedIn, setLoggedIn] = useState(0);
 


  return (
    <div className="App">
      <AppContext.Provider value={{Logged:LoggedIn,HandleLoggedIn:(val)=>setLoggedIn(val)}}>
        <Header />
      </AppContext.Provider>

    </div>
  );

}

Login.js

function handleSubmit(event) {

        event.preventDefault();
        const userData = database.find((n) => n.name === name);
        if (userData) {
            if (userData.password === password) {
                Logg.HandleLoggedIn(1)
                navi('/userprofile');
            }
            else {
                setMessage("Invalid username or Password");
            }
        }
        else {
            setMessage("Invalid username or Password");
        }
        setName("");
        setPassword("");


    }