Login Logout in Navbar

Question

I hope you are ok.

I'm trying to switch to log out in Navabar when the user is logged in, but when I console log I get isloggedin false, even though the user is logged in and the token is stored in localstorage.

here is my code:

App.js

 const App = () => { const [isLoggedIn, setLoggedIn] = useState(false) console.log(isLoggedIn) const handleLogin = token => { if (!token) return localStorage.setItem('token', token) setLoggedIn(true) } const handleLogout = () => () => { setLoggedIn(false) localStorage.clear() } return ( <div className="App"> <Router> <Navbar isLoggedIn={isLoggedIn} logout={handleLogout} /> <Switch> <Route exact path='/' component={props => ( <Login {...props} onLogin={handleLogin} /> )}></Route> <Route exact path="/signin" component={Signin}></Route> <Route exact path="/feed" component={Feed}></Route> <Route exact path="/withuser" component={Withuser}></Route> </Switch> </Router> </div> ) } export default App;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Navbar.js:

 const TheNavbar = (props) => { console.log(props) return ( <div className="navbar"> <Navbar> <NavbarBrand> <NavLink id="logo" tag={Link} exact to="/"> <img src="/img/logounax.png" alt="image" style={{ width: 150 }} /> </NavLink> </NavbarBrand> <Nav> {props.isLoggedIn ? ( <Nav> <NavLink className="link-pink" tag={Link} exact to="/feed"> Profile </NavLink> <NavLink className="link-pink" tag={Link} exact to="/" onClick={props.logout()}> Logout </NavLink> </Nav> ) : ( <Nav> <NavLink className="link-pink" tag={Link} exact to="/"> Login </NavLink> <NavLink className="link-pink" tag={Link} exact to="/signin"> Signin </NavLink> </Nav> )} </Nav> </Navbar> </div> ) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Any ideas why is this happening?

Thank you in advance.

(Post edited)

Answer 1

I check your code there are some issue. You are trying toke check on handleLogin which will only check when you click on handleLogin . What happen if user refresh the page. It will ideally redirect to dashboard page if token is available. So you have to add useEffect which checks on component mount. Basically you need to add this in your App.js component. It will check when component is mounted first time only and if token is available it will set it

useEffect(() => {
    if (localStorage.getItem("token")) {
      setLoggedIn(true);
    }
  }, []);

Just add this snippet in your file. It automatically works if every other things are correct.

You still dont added complete code ;-). But I dont think it will required. This will solve your that problem

I modify your sandbox. If you want to test the functionality type test for both field. Here is thedemo