title: How can I wait for setState to finish before triggering a function in React?
body: <p>Here's my situation:</p>
  
  <ul>
  <li>on this.handleFormSubmit() I am executing this.setState()</li>
  <li>inside this.handleFormSubmit(), I am calling this.findRoutes(); - which depends on the successful completion of this.setState()</li>
  <li>this.setState(); does not complete before this.findRoutes is called...</li>
  <li><strong>How do I wait for this.setState() inside of this.handleFormSubmit() to finish before calling this.findRoutes()?</strong></li>
  </ul>
  
  <p>A subpar solution:</p>
  
  <ul>
  <li>putting this.findRoutes() in componentDidUpdate()</li>
  <li>this is not acceptable because there will be more state changes unrelated the findRoutes() function. I don't want to trigger the findRoutes() function when unrelated state is updated.</li>
  </ul>
  
  <p>Please see code snippet below:</p>
  
  <pre><code>handleFormSubmit: function(input){
                  // Form Input
                  this.setState({
                      originId: input.originId,
                      destinationId: input.destinationId,
                      radius: input.radius,
                      search: input.search
                  })
                  this.findRoutes();
              },
              handleMapRender: function(map){
                  // Intialized Google Map
                  directionsDisplay = new google.maps.DirectionsRenderer();
                  directionsService = new google.maps.DirectionsService();
                  this.setState({map: map});
                  placesService = new google.maps.places.PlacesService(map);
                  directionsDisplay.setMap(map);
              },
              findRoutes: function(){
                  var me = this;
                  if (!this.state.originId || !this.state.destinationId) {
                      alert("findRoutes!");
                      return;
                  }
                  var p1 = new Promise(function(resolve, reject) {
                      directionsService.route({
                          origin: {'placeId': me.state.originId},
                          destination: {'placeId': me.state.destinationId},
                          travelMode: me.state.travelMode
                      }, function(response, status){
                          if (status === google.maps.DirectionsStatus.OK) {
                              // me.response = response;
                              directionsDisplay.setDirections(response);
                              resolve(response);
                          } else {
                              window.alert('Directions config failed due to ' + status);
                          }
                      });
                  });
                  return p1
              },
              render: function() {
                  return (
                      &lt;div className="MapControl"&gt;
                          &lt;h1&gt;Search&lt;/h1&gt;
                          &lt;MapForm
                              onFormSubmit={this.handleFormSubmit}
                              map={this.state.map}/&gt;
                          &lt;GMap
                              setMapState={this.handleMapRender}
                              originId= {this.state.originId}
                              destinationId= {this.state.destinationId}
                              radius= {this.state.radius}
                              search= {this.state.search}/&gt;
                      &lt;/div&gt;
                  );
              }
          });
  </code></pre>