React parent property function not firing when called from child function

Question

In my parent component i have a function called handleDocumentSubmission which i want to pass down to the child.

  handleDocumentSubmission = input => async (e) => {
       console.log("fired");

I then render the following component like this. I use the same function name.

  <FrontConfirm
                    nextStep={this.nextStep}
                    handleReview={this.handleReview}
                    values={values}
                    handleDocumentSubmission={this.handleDocumentSubmission}
                />

Now in my child component i want to call this function from a child function on click of a button.

  continue = () => {
        console.log("clicked", this.props);
        this.props.handleDocumentSubmission("front");
    };

<Button onClick={this.continue}
  variant="contained" color="primary">
  Confirm
</Button>

Now the console log for clicked i can see with props that has my handleDocumentSubmission function. But the console.log from the parent function console.log("fired") Does not get called.

As you're using an async function, you should await this.props.handleDocumentSubmission("front"); in the continue method — samb102

Treycos Treycos · Accepted Answer · 2019-02-18T10:53:06

This happens because handleDocumentSubmission is a curried function that accepts 2 sets of parameters. By using the following syntax and passing your event param, it will work :

continue = ev => {
    console.log("clicked", this.props);
    this.props.handleDocumentSubmission("front")(ev);
};

Your function will also not need to be asynchrinous :

handleDocumentSubmission = input => e => {
    console.log("fired");
}

The final syntax without the continue function (I assume you created it for testing) will be the following :

<Button onClick={this.props.handleDocumentSubmission("front")}
    variant="contained" color="primary">
    Confirm
</Button>

Using this, your function will receive both your value (front) and the event information when fired.

Having a synchronous function will not prevent it from returning a value :

handleDocumentSubmission = input => e => {
    console.log("fired");
    return 'success'
}

continue = ev => {
    console.log("clicked", this.props);
    const result = this.props.handleDocumentSubmission("front")(ev);
    console.log(result)
};

If you really want it to be async, use the await keyword :

handleDocumentSubmission = input => async e => {
    console.log("fired");
    return /* A promise  */
}

continue = async ev => {
    console.log("clicked", this.props);
    const result = await this.props.handleDocumentSubmission("front")(ev);
    console.log(result)
};

React parent property function not firing when called from child function

1 Answers