How can I wait for setState to finish before triggering a function in React?
<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>