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?