SetState inside function of React class component

Question

I am determining the users OS platform and setting state based on it. I have a function which determines the users OS platform and i am trying to setState, But the property inside the state is always returning false.

Here is my Component.

class HowtoDownload extends React.Component {
constructor(props) {
super(props);
this.state = {
                windows: false,
                chromebook: false,
                ipad: false,
                mac: false,
}
        componentDidMount() {
            console.log("How to Download Component Mounted");
            this.getUserPlatform();
            console.log(this.state.windows);
        }
 getUserPlatform = () => {
            var OSName = "UnknownOS";
            if (navigator.appVersion.indexOf("Win") !== -1)
                OSName = "Windows";
                this.setState({windows: true});
        }
}

Setting state is asynchronous in React - you cannot log it immediately after setting it. You can use the callback option of this.setState which will always execute its callback function after state is set. — lawrence-witt
– lawrence-witt, Commented Nov 21, 2020 at 12:54
as @lawrence-witt said you can't, but you can console inside the render() method — Haikel Fazzani
– Haikel Fazzani, Commented Nov 21, 2020 at 12:57

Yasmin · Accepted Answer · 2020-11-21 12:59:59Z

3

componentDidMount() is invoked immediately after a component is mounted. So after the state has been updated, it won't called again.

To see the updated result, you can use the componentDidUpdate() lifecycle method. You can fetch the result in render() method to.

Also React updates state asynchronously, if you want to see the updated state when it's done, you should use the callback function of setState which gets fired as soon as the state gets updated:

this.setState({windows: true}, () => {
  console.log(this.state.windows)
})

)

answered Nov 21, 2020 at 12:59

Yasmin

3433 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

SetState inside function of React class component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related