How to render component depends role

Question

so I have a specific code. The problem is it's not works in moments - when it's should. I need refresh page to works.

If user from LocalStorage is null it's should render If user from LocalStorage exist it's shouldn't render

It's works, but how can I improve it to works after login (not after refreshing page) ?

Should I use other react lifecycle method?

class Navbar extends React.Component {

    constructor(props){
        super(props)
        this.state ={
            user: null
        }
    }

    componentDidMount(){
        const user = JSON.parse(localStorage.getItem('user'));
        this.setState({
            user: user
        },
        console.log('test'+ this.state.user)
        )
    }

    render(){
        return(
            <div>
            { !this.state.user ?
            <div className ="navbar">
                <Logo/>
                <Menu/>
                <PanelOptions/>
            </div>
             : null}
             </div>
        );
    }
}

Answer 1

Looking at the component it seems that it can be a functional component.

And the user can be sent as a prop from parent component which is rendering the NavBar component.

export default NavBar = (props) => {
if(!props.user)
{
   return (
   <div className ="navbar">
     <Logo/>
     <Menu/>
     <PanelOptions/>
    </div>
  )
}
else
{
 return null
}
}