React, Parent notifies child when handle complete

Question

and thanks for any assistance.

I have a parent-child component setup where the state of the parent is passed down as props to the child, also one of the props is an onClick event handler who's button lives in the child but handled in the parent. When the onclick is pressed it is going to raise that handle event in the parent, where the parent will call up to the api to get some data. When this is complete, the child needs to be notified.

My question is: Other than including another prop that the parent would set - which would let the child know the parent is complete, what are my options? (note: i am not using Redux and was hoping not to).

Could Promises work here (See code below) or is props the recommended implementation. (My concern with props is that I am already passing 6 or so to the child and I didn't want to keep adding more especially for something like this)

Parent:

private handleOnclick = () => {
        this.apiService.getData() ...
 }

<Child onClick={this.handleOnclick} ...

Child:

Child has an internal handleButtonOnclick function that calls to the parent.

   private handleButtonOnclick = () => {
         this.props.handleOnclick().then( () => {
         **WHEN COMPLETE TAKE SOME ACTION.**
    });
   }
   <Button onClick={() => this.handleOnclick()} >Click Me</Button>

As you can see, I am trying to figure out how to notify the client back after the parent has finished processing (without using props or some state management lib)

thanks!

Maybe if you add a more concrete example I could give you a more detailed advice, but it seems you are in the right track, thats how react should work. You are doing the business stuff in the parent and only passing data/notification to your child. If you have more child components and you want to prevent prop-drilling you could use context, but I think that is not the case. — damjtoh

Yuan-Hao Chiang Yuan-Hao Chiang · Accepted Answer · 2019-09-20T21:02:39

ComponentDidUpdate will let you see if a prop changed:

Parent:

constructor(props) {
  super(props);
  this.state = {
    gotData: false;
  }
}

handleOnClick {
  this.setState({ gotData: false });
  this.apiService.getData(() => {
    // ...
    this.setState({ gotData: true });
  }
}

// render()
<Child onClick={handleOnClick} gotData={this.state.gotData} />

Child:

componentDidUpdate(prevProps) {
  if (props.gotData && props.gotData !== prevProps.gotData) {
    alert('data came in! (child)');
  }
}

Assuming your API request is not immediate/way too fast, gotData will be first set to false. Then, when the API response comes back, gotData gets set to true and is different from the previous gotData, hence triggering the alert code.

In real-life/bigger applications, instead of gotData, usually the response from the network, in the form of an id or a Redux state update is used, but this should work for your case.

Hope it's more clear now!

React, Parent notifies child when handle complete

1 Answers