React update state without refresh - reactjs

Question

I'm trying to update the state in a navigation component to show "Log Out" if a cookie is set. The only problem is I cannot get the cookie without refreshing the entire page. Is there a way for me to get the cookie without a refresh? The below code shows how I'm trying to get the cookie and setting the state.
Updated with code:
import React, {Component} from 'react';
import './NavigationItems.css';
import Logo from '../../Logo/Logo';
import { Route, Link } from 'react-router-dom';
import PortalFindSubscriber from '../../../containers/Portal/PortalFindSubscriber';
import Login from "../../../components/Login/Login";
import Register from "../../../components/Register/Register";
import Reset from "../../../components/Reset/Reset";
import ResetConfirm from "../../../components/Reset/ResetConfirm";
import Aux from '../../../hoc/Aux/Aux';
import Cookies from 'universal-cookie';
const cookies = new Cookies();
class navigationItems extends Component{
constructor() {
super();
this.updateLoggedStatus = this.updateLoggedStatus.bind(this)
}
state = {
isLogged: false,
};
componentDidMount() {
this.setState({isLogged: true});
console.log(this.state.isLogged);
this.updateLoggedStatus();
}
Collapse (e) {
const body = document.body;
const collapseBtn = e.target;
const collapsedClass = "collapsed";
collapseBtn.getAttribute("aria-expanded") === "true"
? collapseBtn.setAttribute("aria-expanded", "false")
: collapseBtn.setAttribute("aria-expanded", "true");
collapseBtn.getAttribute("aria-label") === "collapse menu"
? collapseBtn.setAttribute("aria-label", "expand menu")
: collapseBtn.setAttribute("aria-label", "collapse menu");
body.classList.toggle(collapsedClass);
};
Toggle(e){
const body = document.body;
const toggleMobileMenu = e.target;
toggleMobileMenu.getAttribute("aria-expanded") === "true"
? toggleMobileMenu.setAttribute("aria-expanded", "false")
: toggleMobileMenu.setAttribute("aria-expanded", "true");
toggleMobileMenu.getAttribute("aria-label") === "open menu"
? toggleMobileMenu.setAttribute("aria-label", "close menu")
: toggleMobileMenu.setAttribute("aria-label", "open menu");
body.classList.toggle("mob-menu-opened");
}
onSignOutClick = () =>{
cookies.remove('AccessToken');
this.setState({isLogged: false});
}
updateLoggedStatus() {
this.setState({ isLogged: true });
}
render () {
cookies.addChangeListener(console.log(cookies.get('AccessToken')));
console.log(this.state.isLogged);
//const { isLogged } = this.state;
return(
<Aux>
<header className="pageHeader">
<nav>
<Link to={"/"}>
<Logo />
</Link>
<button className="toggle-mob-menu" aria-expanded="false" aria-label="open menu" onClick={this.Toggle}>
<svg width="20" height="20" aria-hidden="true">
<use xlinkHref="#down"></use>
</svg>
</button>
<ul className="adminMenu">
<li className="menuHeading">
<h3>Admin</h3>
</li>
{cookies.get('AccessToken')!==undefined?
<>
<li>
<Link to={"/"} onClick={this.onSignOutClick}>
<div class="material-icons" style={{marginRight: 10}}>
login
</div>
<span>Log Out</span>
</Link>
</li>
</>
:<li>
<Link to={"/"}>
<svg>
<use xlinkHref="#users"></use>
</svg>
<span>Log In</span>
</Link>
</li>}
<li>
<button className="collapse-btn" aria-expanded="true" aria-label="collapse menu" onClick={this.Collapse}>
<svg aria-hidden="true">
<use xlinkHref="#collapse"></use>
</svg>
<span>Collapse</span>
</button>
</li>
</ul>
</nav>
</header>
<Route exact path="/" component={Login} />
<Route exact path="/terms" component={Register} />
<Route exact path="/reset" component={Reset} />
<Route exact path="/reset_confirm" component={ResetConfirm} />
<Route exact path="/find" component={PortalFindSubscriber} />
</Aux>
);
}
}
export default navigationItems;

Answer 1

You Should use
boolean shouldComponentUpdate(object nextProps, object nextState)
which decided whether the component should be updated or not.
for feasible solution you can use Functional Components's UseEffect callbacks for updating states