Updating NavBar on Logout Reactjs

Question

I'm trying to update my NavBar on logout, here is the code I wrote:

App.js:

class App extends Component {
  constructor(props){
    super(props);
    this.state = {};  
    this.handleLogout = this.handleLogout.bind(this); 
  }

  handleLogout(){
    sessionStorage.clear(); 
    this.setState({loggedIn: false});
  }

  componentWillMount(){
      if(sessionStorage.getItem('access_token') != null && sessionStorage.getItem('id_token') != null){
          this.setState({loggedIn: true}); 
      }
      else{
          this.setState({loggedIn: false}); 
      } 
  }
  render() {
    return (
        <BrowserRouter>
          <div>
            <title>Webshop</title> 
            <NavBar loggedIn={this.state.loggedIn} />
            <Switch>
                    {/*Routes need to be include in App.js otherwise root can't find the paths*/}
                    <Route exact path='/' component={Home}/>
                    <Route exact path='/categories' component={Categories}/>
                    <Route exact path='/login' component={Login}/>
                    <Route exact path='/register' component={Register}/>
                    {(this.state.loggedIn) ? 
                    <Route exact path='/logout' render={(props) => (<Logout logOutHandler={this.handleLogout} {...props}/>)} /> 
                    : null}
                    <Route render={function(){
                        return (<NotFound/>); 
                    }}/>
                </Switch>
              <Footer/>
          </div>  
        </BrowserRouter>
    );
  }
}

NavBar.js:

class NavBar extends Component {
    constructor(props) {
        super(props);
        this.loggedIn = this.props.loggedIn; 
        this.toggle = this.toggle.bind(this);
        this.state = {
          isOpen: false
        }; 
    }

    toggle() {
        this.setState({
          isOpen: !this.state.isOpen
        });
    }

    render(){
        return(
            <div>
                <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>
                <Navbar color="faded" light expand="md">
                    <NavLink className='navbar-brand' exact to='/'>
                        <img src={logo} alt='Brand' width='35px' height='35px'/>
                    </NavLink>
                    <NavbarToggler onClick={this.toggle} />
                    <Collapse isOpen={this.state.isOpen} navbar>
                        <Nav className="mr-auto" navbar>
                            <NavItem>
                                <NavLink className='nav-link' exact to='/categories'>
                                    Categories
                                </NavLink>
                            </NavItem>
                        </Nav>
                        <Nav className='mx-auto' navbar>
                            <Form inline>
                                <FormGroup>
                                    <Input size='sm' type="text" name="search" placeholder="Search" />
                                </FormGroup>
                                <Button size='sm'><i className='fa fa-search'></i></Button>
                            </Form>
                        </Nav>
                        <Nav className="ml-auto" navbar>

                            <NavItem>
                                <NavLink className='nav-link' exact to='/cart'>
                                    <i className='fa fa-shopping-cart'></i>
                                </NavLink>
                            </NavItem>

                            {(this.loggedIn) ?
                            <NavItem>
                                <NavLink className='nav-link' exact to='/profile'>
                                    <i className='fa fa-user'></i> 
                                </NavLink>
                            </NavItem>
                            : null }

                            {(this.loggedIn) ?

                            <NavItem>
                                <NavLink className='nav-link' exact to='/logout'>
                                    <i className='fa fa-sign-out'></i>
                                </NavLink>
                            </NavItem>
                            : 
                            <NavItem>
                                <NavLink className='nav-link' exact to='/login'>
                                    <i className='fa fa-sign-in'></i>
                                </NavLink>
                            </NavItem>
                            }
                        </Nav>
                    </Collapse>
                </Navbar>
            </div>
        );
    }
}

LogOut.js:

class Logout extends Component{
    constructor(props){
        super(props);

        this.handleLogout = this.handleLogout.bind(this); 

    }

    handleLogout(){
        sessionStorage.clear();
        this.props.logOutHandler(); 
        //window.location.replace('/login'); 
    }

    render(){
        return(
            <div>
                <Container className="content-container">
                    <Row className="justify-content-md-center">
                        <Col md={4}>
                            <Card>
                                <CardBody>
                                    <img className="logoutImage" src={logo} width='130' height='130px' alt='Logo'/>
                                    <hr></hr>
                                    <CardText>
                                        Clicking "Logout" will log you out from webshop [NAME]
                                    </CardText>
                                    <Link exact to='/'>
                                    <Button size='sm' className='float-left' color='default'>Cancel</Button>
                                    </Link>
                                    <Link excat to='/login'>
                                        <Button size='sm'className='float-right' color='secondary' onClick={this.handleLogout}>Logout</Button>
                                    </Link>
                                </CardBody>
                            </Card>
                        </Col>
                    </Row>
                </Container>

            </div>
        )
    }
}

I'm trying to update the state to loggedIn = false. On Click of the logout button inside Logout.js. This should trigger the method handleLogout which triggers the method in this.props.logOutHandler, which triggers the handleLogout inside App.js this method should update the state to loggedIn = false. But somehow the state loggedIn = always true, untill I refresh the page.

Possibly I can handle this error with window.location.replace('/login') but I want a solution without refreshing the page and only rerendering the NavBar component

Answer 1

In your NavBar.js you don't need to do this.loggedIn = this.props.loggedIn in your constructor, that can lead to problems.

You can just access the props directly in the render :

this.props.loggedIn ? {node} : null

instead of:

this.loggedIn ? {node} : null

Hope this helps.