undefined in variable using react componentDidMount

what happens is that at the initial render, render() method is called (before componentDidMount() is called), so it shows 'undefined'. changing the value of 'this.role' won't re-render the page.

You will have to use state for this. Below code should work I believe.

export default class Dashboard extends Component {
constructor(){
  super()
  this.state = {
    role : undefined
    }
} 

componentDidMount() {
    this.setState({role: window.localStorage.getItem('role')})
    console.log('role', this.role) //return admin
  }

  render(){
    console.log('role', this.state.role) //return undefined
    return(
      <div>
        Component
      </div>
    )
  }
}

It's returning undefined because you're setting this.role after the component is mount (componentDidMount). So the first render doesn't have this.role.

After componentDidMount is run you're not changing the state and the render is not running again (and therefore not getting the new info).

Try with componentWillMount instead, it should probably work.

Here's the React Lifecycle documentation.

Edit: Added code.

export default class Dashboard extends Component {

  componentWillMount() {
    this.role = window.localStorage.getItem('role')
    console.log('role', this.role) // return admin
  }

  render(){
    console.log('role', this.role) // now returning admin because this.role is set before the 1st render
    return(
      <div>
        Component
      </div>
    )
  }
}

As other users have pointed out, you can also use setState instead and it would also work (In that case, when the state changes the render is run again and your role is displayed accordingly).

You see undefined in the view because by the time the component has rendered there was nothing in role because componentDidMount is called after the initial render. Moreover, the component doesn't rerender after you have set role value from localStorage because it is not on the state. If you place role on the state and do this:

componentDidMount() {
  this.setState({ role: window.localStorage.getItem('role')});
}

render(){
  console.log('role', this.state.role)
  return(
      <div>
        Component
      </div>
    )
}

then you will be able to see value of role in the view, but it will cause extra rerender of the component since you will change its state, according to react docs about componentDidMount:

Calling setState() in this method will trigger an extra rendering, but it will happen before the browser updates the screen.

You can read more about componentDidMount here.

Update:

In your case you don't have to put role on the state, but then you can fetch its value from the constructor:

constructor(props) {
  super(props);
  this.role = window.localStorage.getItem('role');
}

and it will be available in the view.