setState in react function not updating in promise method-CodePudding

Im using reactjs and know it pretty well such as the fundamentals. However, I have been doing research on this weird behavior and havent been able to find the culprit. Maybe one of you react elites have an idea lol. So I am using a stateful component that has the following state object

this.state = {
  buttonVisible: false,
};

So to show the button and change the state, I am doing so in a promise

handleSubmit = async (e) => {

const { status } = this.props;

     e.preventDefault();


     await verifyForm().then((data) => {
       const submissionSuccess = status === 'SUCCESSFUL_SUBMISSION';
       this.setState({
         buttonVisible: submissionSuccess
       });
       actions.showNotification(data);
     }).catch(err => actions.showNotification(err));
   };

And in the render method:

This is the button that has the onClick handler that should set the buttonVisible state to true.

           <Button
              fullWidth
              onClick={this.handleSubmit}
              type="submit"
              variant="contained"
              color="primary">Submit 
            </Button>

After I click the button with the onClick handler, it should render the following button if this.state.buttonVisible is true.

{ this.state.buttonVisible &&
                  <Button
                    onClick={this.handleShowModal}
                    variant="contained"
                    color="primary">
                    Proceed
                  </Button>
                }

But it is not rendering the button. So I console logged the this.state.buttonVisible info and it is still false.

I know that the method is not returning any error because I can see that the form is verified successfully on my end, also, it is not going to the catch block, but the .then block. I think it has something to do with the handleSubmit handler. But not sure what it is. Any help appreciated. Thanks!

CodePudding user response：

await returns resolved value of Promise and not a Promise to which then can be attached. You can modify your code:

    ...
   try{
       const data = await verifyForm();
       const submissionSuccess = status === 'SUCCESSFUL_SUBMISSION';
       this.setState({
             buttonVisible: submissionSuccess
           });
       actions.showNotification(data);

    }catch(err){
     actions.showNotification(err)
   }