React.js Log out did not turn into log in after I log out in nav bar

Question

I am working with node.js and react.js to do a simple login and log out function. the problem is that when I want to log out from the website, the navbar does not turn into the log in after I logout. It removes my details from local storage but my navbar still remains the same after I log out. sorry for the bad code, I am still new to this

App.js

import React from 'react';
import "./App.css"
import Navbar from './components/Navbar';
import { Switch, Route} from 'react-router';
import { BrowserRouter } from 'react-router-dom'
import Home from './components/pages/HomePage/Home'
import Footer from './components/pages/Footer/Footer';
import Service from './components/Service';

import Info from './components/pages/Info/Info';
import infoMs from './components/pages/Info/infoMs';
import Login from './components/Login';
import Register from './components/Register';
import Profile from './components/Profile';




function App()
{
  return(
    <BrowserRouter>
      <Navbar />
      <Switch>
     
        <Route exact path={["/", "/home"]} component={Home}/>
        <Route path='/service' component={Service}/>
        <Route path='/phua' component={Info}/>
        <Route path='/foong' component={infoMs}/>
        <Route exact path='/login' component={Login}/>
        <Route exact path="/register" component={Register} />
        <Route exact path="/profile" component={Profile} />


      </Switch>
      
      <Footer />
    </BrowserRouter>
  );
  
}


 

export default App;

auth-service.js

import axios from "axios";


const API_URL = "http://localhost:8080/api/auth/";

const register = (username, email, password) => {
  return axios.post(API_URL + "signup", {
    username,
    email,
    password,
  });
};

const login = (username, password) => {
  return axios
    .post(API_URL + "signin", {
      username,
      password,
    })
    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      }

      return response.data;
    });
};

const logout = () => {
  localStorage.removeItem("user");
  
};

const getCurrentUser = () => {
  return JSON.parse(localStorage.getItem("user"));
};

export default {
  register,
  login,
  logout,
  getCurrentUser,
};

navbar.js

import React, { useState, useEffect  } from 'react'
import {Link} from 'react-router-dom'
import {FaBars, FaTimes} from 'react-icons/fa'
import { Button } from './Button'
import './Navbar.css'
import {IconContext} from 'react-icons/lib'
import AuthService from "../services/auth-service";


export const img1 = require('./images/kdu.png');



function Navbar  ()  {
  

    const [currentUser, setCurrentUser] = useState(undefined);
  
    useEffect(() => {
      const user = AuthService.getCurrentUser();
  
      if (user) {
        setCurrentUser(user);
  
      }
    }, []);
  
    const logOut = () => {
      AuthService.logout();
      
    };
  
  
  

    const [click,setClick]= useState(false);
    const [button,setButton]= useState(true)
    

    const handleClick = () => setClick(!click);
    const closeMobileMenu = () => setClick(false)

    const showButton = () => {
        if (window.innerWidth <= 960){
            setButton(false)
        } else {
            setButton(true) 
        }
    };

    useEffect(() => {
        showButton();

        
        
      }, []);
    window.addEventListener('resize',showButton);
    
    return (
      
        <>
        <IconContext.Provider value ={{color: "#fff"}}>
        <nav className='navbar'>
          <div className='navbar-container container'>
            <Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
              <img src="/images/Logo-WHITE.png" 
              alt="UOWKDU Logo" width="35%" height="85%"  className='navbar-icon' />
              
              
            </Link>
            <div className='menu-icon' onClick={handleClick}>
              {click ? <FaTimes /> : <FaBars />}
            </div>
            <ul className={click ? 'nav-menu active' : 'nav-menu'}>
              <li className='nav-item'> 
                <Link to='/' className='nav-links' onClick={closeMobileMenu}>
                  Home
                </Link>
              </li>
              <li className='nav-item'>
                <Link
                  to='/service'
                  className='nav-links'
                  onClick={closeMobileMenu}
                >
                  Services
                </Link>
              </li>
        
              <li className='nav-item'>
                
                <Link
                  to='/service'
                  className='nav-links'
                  onClick={closeMobileMenu}
                >
                  About Us
                </Link>
              </li>
        
                {currentUser ? (
                  <div className="container-Current">
                    <li className="nav-btn">
                        <Link to={'/profile'} className='btn-link' >
                          <Button buttonStyle='btn--outline' >{currentUser.username}</Button>
                        </Link>
                    </li>
                   <li className='nav-btn'>   
                        <Link to='/login' className='btn-link' onClick={logOut}>
                          <Button buttonStyle='btn--outline' >LogOut</Button>
                        </Link>
                    </li> 
                  </div>
                ) : (
                  <div className="container-Current">
                    <li className="nav-btn">
                    <Link to={'/login'} className='btn-link' >
                      <Button buttonStyle='btn--outline' >Login</Button>
                    </Link>
                    </li>
                  </div> 
            )}

                <li className='nav-btn'>
                      {button ? (
                        <Link to='/sign-up' className='btn-link'>
                          <Button buttonStyle='btn--outline' >SIGN UP</Button>
                        </Link>
                      ) : (
                        <Link to='/sign-up' className='btn-link' onClick={closeMobileMenu}>
                          <Button
                            buttonStyle='btn--outline'
                            buttonSize='btn--mobile'
                          >
                            SIGN UP
                          </Button>
                        </Link>
                      )}
                    </li>
             
            </ul>
          </div>
        </nav>
        </IconContext.Provider>
        </>
    )
}



export default Navbar

after when I log out

Answer 1

Your code is of pretty good quality. One additional item I might add (even though that wasn't part of your original question) is that you may want to re-direct the user to a new page after they've logged out. I don't think the Nav bar would render the new one otherwise.

You could use window.location.reload

Answer 2

Although localStorage value was removed the state is not gonna change. You have to set the current user to undefined.

const logOut = () => {
      AuthService.logout();
      setCurrentUser(undefined)
};

Answer 3

set setCurrentUser null when logout.It will trigger update in navbar.

const logOut = () => {
      AuthService.logout();
      setCurrentUser(null)
    };