Hide Some Element With Local Storage In React - reactjs

Question

I want to hide some navigation when the user haven't login yet, so I use local storage to save user's id and use if logic to hide and show the navigation, but when i clear the data in local storage and compare it to null, the navigation still showed up.
Here is the code to save data in local storage
loginUser = () => {
Axios.post('http://private-6fdd31-intern1.apiary-mock.com/interns/login', this.state.user)
.then((res) => {
if(res.data.role === "admin")
{
localStorage.setItem("user", res.data.user_id)
this.props.history.push('/member-list');
}
}, (err) => {
console.log(err);
})
}
This is how I compare and clear the data when logout navigation is clicked
handleLogout = () => {
localStorage.clear("user");
}
render() {
return(
<Router>
<Fragment>
<div className="navigation">
{ localStorage.getItem("user") !== null?
<Fragment>
<Link to="/member-list">Member</Link>
<Link to="/override-list">Override</Link>
<Link onClick={this.handleLogout} to="/">Logout</Link>
</Fragment>
: null
}
</div>
<Route path="/" exact component={routeProps => <Login {...routeProps}/>}/>
<Route path="/member-list" component={MemberDashboard}/>
<Route path="/override-list" component={OverrideDashboard}/>
</Fragment>
</Router>
)
}

Answer 1

react native wont call render() method as long as there is no state or props update, you need to call this.forceUpdate() to force a rerender. Documentation: https://facebook.github.io/react/docs/component-api.html like
handleLogout = () => {
localStorage.clear("user");
this.forceUpdate()
}

Answer 2

Maybe use the state to save the user when you set to local storage and same thing when you handleLogout?
if(res.data.role === "admin")
{
this.setState({ user: res.data.user_id})
localStorage.setItem("user", res.data.user_id)
this.props.history.push('/member-list');
}
handleLogout = () => {
localStorage.clear("user");
this.setState({ user: ""})
}
So when state is updated, the component re-renders.