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!
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)
}