Wait for promise from father component from a children in React

Viewed 1391

I'm trying to implement a React application using the Container/Presentational pattern (a.k.a Smart/Dumb components).

Simply put what I have is a Presentational component that shows and hides a modal window. In the modal there's a form, once the user submits the form from the Presentational component I call the Container (via a prop). At this point, the Container makes an AJAX request.

To put it in a more visual way this is what happens:

modal submit -> Presentational calls Container -> Container makes AJAX call

After the AJAX call is done I need to notify the Presentational component so that it can hide the modal.

The way I've implemented it is the following:

// In Presentational.jsx
handleModalSubmit() {
  this.props
  .onSubmit()
  .then(() => this.setState({ isModalOpen: false }))
}

// In Container.jsx
handleSubmit () {
  return fetch(/*...*/).then(/* handle the data */)
}

You can see it in action here https://www.webpackbin.com/bins/-Kl3oN5Hua4cxwmZx4Qo

My question is is it ok for a parent to return a promise to a child or is there a more Reactive way to do it?

1 Answers
Related