How do I set the status of a variable of a class in a method that using this keyword

Question

I am trying to display the outcome of a reset service in my Ionic react app. I am unable to use the this.setState({resetSuccess}) because I am trying to do that in a method, and this would refer to the method's scope. (I have also mentioned the issue as comments)

Please refer to the code below:

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 my render function:

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

Answer 1

Binding the handleSubmit method to the class in the constructor worked.

  constructor(props: any) {
        super(props);
        const errors: Errors = {};
        const values: Values = {};
        this.state = {
            errors,
            values
        };
        this.currentPasswordProvided = false;
        this.passwordValidated = false;
        this.completeValidation = false;
        this.emailAddress = '';
        Reset.history = this.props.history;
        this.handleSubmit=this.handleSubmit.bind(this) //<------ Binding it to the class is required because when the submit is clicked, the handler gets unmounted, and this will not be defined in the handleSubmit.
    }