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

Does this answer your question? [What is event pooling in react?](https://stackoverflow.com/questions/36114196/what-is-event-pooling-in-react) — Emile Bergeron, Jan 10 '20 at 20:42
I don't think the problem is `this`, even the error message doesn't say that `this` is a problem. — Emile Bergeron, Jan 10 '20 at 20:43
You can't pass the React `event` object asynchronously, but you can capture the values you need and pass these values in the async callbacks. — Emile Bergeron, Jan 10 '20 at 20:44
And to learn more about context: [How to access the correct `this` inside a callback?](https://stackoverflow.com/q/20279484/1218980) — Emile Bergeron, Jan 10 '20 at 20:47
`let currentComponent = this;` is not doing what I think you think it is doing. You would need to use a ref instead. Altho it doesn't appear you even need to do that. — Brad Evans, Jan 10 '20 at 20:49

Brad Evans · Answer 1 · 2020-01-10T20:54:15.097

0

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

}

edited Jan 10 '20 at 20:54

answered Jan 10 '20 at 20:36

Brad Evans

719
2
6
19

My functions isAccount and forgottenPasswordEmail are set to receive this.props but not "this" which in this case you named props. – Flama Jan 10 '20 at 20:39
They both work fine if they are not nested to each other and I just pass event and this.props to them. – Flama Jan 10 '20 at 20:39
props is from this: const { props } = this; – Brad Evans Jan 10 '20 at 20:39
1

or just using arrow functions. – Emile Bergeron Jan 10 '20 at 20:40
@EmileBergeron Yes - I should have said the why. Updated to reflect that. – Brad Evans Jan 10 '20 at 20:41
Mm I still get the same error when using your solution – Flama Jan 10 '20 at 21:34

score 0 · Accepted Answer · answered Jan 11 '20 at 16:47

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

score -1 · Answer 3 · answered Jan 10 '20 at 20:41

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.

Passing this.props to nested functions

3 Answers3