Is there a way to set the state of this Ionic react app when displaying the outcome of a reset service? I am facing challenges with using this.setState({resetSuccess}) within a method due to scope issues. (Details provided in comments)
Here is the relevant code snippet:
private async handleSubmit(e: React.FormEvent): Promise<any> {
e.preventDefault();
try {
console.log(`These are the reset params---->${JSON.stringify(Reset.resetParams)}`)
const resetService = new ResetService();
const resetResponse: ResetResponse = await resetService.reset(Reset.resetParams);
console.log(`This is the response from the API ----> ${JSON.stringify(resetResponse}`)
if (resetResponse.status === 401) {
console.log("Authentication failed");
} else if (resetResponse.status === 200) {
console.log("Password reset successfully");
const resetSuccess: boolean = true;
this.setState({ resetSuccess }); // ****How do I set this state? which is in the class's scope?
Reset.history.push('/login');
}
} catch (e) {
console.log(`Request failed: ${e}`);
const resetSuccess: boolean = false;
this.setState({ resetSuccess });
}
}This is how it looks like after rendering:
public render() {
const { resetSuccess, errors } = this.state;
const context: FormContext = {
...this.state,
setValues: this.setValues,
validate: this.validate
};
return (
<IonPage id="login-registration-page">
<IonHeader>
<IonToolbar color="primary">
<IonTitle>Reset Password</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<FormContext.Provider value={context}>
<form onSubmit={this.handleSubmit} className="login-registration-form ion-padding">
<div className="container">
{this.props.render()}
<div className="form-group">
<IonButton
type="submit"
disabled={!this.completeValidation}
expand="block"
>Submit</IonButton>
</div>
{resetSuccess === true && ( //*****This is what I am trying to display based on the outcome
<div className="alert alert-info" role="alert">
Password reset successfull. You will be redirected shortly to the login page
</div>
)}
{resetSuccess === false &&
(
<div className="alert alert-danger" role="alert">
Either the link that you have clicked on or the current password you provided is incorect. Please use the right verification link you received and input the correct password.
</div>
)}
</div>
</form>
</FormContext.Provider>
</IonContent>
</IonPage>
)
}