Passing this.props to nested functions

Question

Here's what I'm trying to do:

handleFormSubmit(event){
        let currentComponent = this;
        const { t } = this.props;
        event.preventDefault();

        UserService.isAccount(event, this.props).then(function(status) {
            if(status === statusCode.OK) {
                 UserService.forgottenPasswordEmail(event, currentComponent.props).then(function (status){
                    toast.notify("t('forgottenPassword.emailSent')");  
                  }) 
            } else {
               toast.notify(t('forgottenPassword.emailNotSent'));
            }  
        })

}

As seen above, I'm trying to pass this.props to the UserService.isAccount function to the UserService.forgottenPasswordEmail function which is called inside the .then of the last one. I've tried to reference this with currentComponent but it doesn't seem to work as I get 'Cannot read property 'constructor' of null'.

How can I achieve this?

Update. This shows Unhandled Rejection (TypeError): Cannot read property 'target' of undefined.

handleFormSubmit(event){
    let currentComponent = this;
    const { t } = this.props;
    event.preventDefault();
    const { aux } = event;
    UserService.isAccount(aux, this.props).then(function(status) {
        if(status === statusCode.OK) {
            UserService.forgottenPasswordEmail(aux, currentComponent.props).then(function (status){
               toast.notify("t('forgottenPassword.emailSent')");  
             }) 
        } else {
           toast.notify(t('forgottenPassword.emailNotSent'));
        }  
    })     
}

Answer 1

I believe this should accomplish what you're trying to do. One issue is you're losing the context of "this" and let currentComponent = this; is not doing what I think you think it is doing. You would need to use a ref instead. But it doesn't appear that you even need to do that.

handleFormSubmit(event){
    const { props } = this;
    const { t } = props;
    event.preventDefault();

    UserService.isAccount(event, props).then(function(status) {
        if(status === statusCode.OK) {
             UserService.forgottenPasswordEmail(event, props).then(function (status){
                toast.notify("t('forgottenPassword.emailSent')");  
              }) 
        } else {
           toast.notify(t('forgottenPassword.emailNotSent'));
        }  
    })

}

Answer 2

What worked for me was adding event.persist().

handleFormSubmit(event){
    let currentComponent = this;
    const { t } = this.props;
    event.preventDefault();
    event.persist();
    UserService.isAccount(event, this.props).then(function(status) {
        if(status === statusCode.OK) {
            UserService.forgottenPasswordEmail(event, currentComponent.props).then(function (status){
               toast.notify(t('forgottenPassword.emailSent'));  
             }) 
        } else {
           toast.notify(t('forgottenPassword.emailNotSent'));
        }  
    })     
}

Answer 3

The this in UserService.isAccount(event, this.props) would refer to the UserService object instead of the parent component of the handleFormSubmit method.

You will need to save a reference to those props in a variable and then reference said variable in the call to UserService.isAccount, which I believe you are already doing with const { t } = this.props .

So, changing method call to UserService.isAccount(event, t) should fix your reference error.