title: How to set travel mode of google directions api dynamically in reactjs?
body: <p>I am trying to update the travel mode dynamically based on the selected radio buttons.</p>
  
  <p>I have read the documentations of the directions api and have tried the following.</p>
  
  <pre><code>class Transport extends React.Component {
    state={
      origin: '',
      destination: '',
      directions: '',
      mode: 'DRIVING'
    }
  
    setDirections(){
      const DirectionsService = new google.maps.DirectionsService();
  
        DirectionsService.route({
          origin: this.state.origin,
          destination: this.state.destination,
          travelMode: google.maps.TravelMode[this.state.mode]
        }, (result, status) =&gt; {
          if (status === google.maps.DirectionsStatus.OK) {
            this.setState({
              directions: result,
            });
          } else {
            console.error(`error fetching directions ${result}`);
            alert('Selected mode of transport is not available for the for the trip!');
          }
        });
    }
  
    showPlaceDetails(place) {
      let destination = sessionStorage.getItem('city');
      destination=destination.replace(/\+/g, ' ');
      console.log(destination);
      let origin = place.address_components[0].long_name.toString();
      try{
          origin+= ' ' + place.address_components[2].long_name.toString();
      }catch(e){}
      console.log(origin);
  
      this.setState(() =&gt; ({origin, destination}));
  
      this.setDirections();
  }
  
  onModeChange = (e) =&gt;{
    const mode = e.target.value;
    console.log(mode);
  
    this.setState(() =&gt; ({mode}));
  
    this.setDirections();
  }
  
     render() {
     const GoogleMapExample = withGoogleMap(props =&gt; (
        &lt;GoogleMap
          defaultCenter = { { lat: 40.756795, lng: -73.954298 } }
          defaultZoom = { 13 }
        &gt;
        {this.state.directions &amp;&amp; &lt;DirectionsRenderer directions={this.state.directions} /&gt;}
        &lt;/GoogleMap&gt;
     ));
     return(
        &lt;div&gt;
          &lt;div className='travel-details-container'&gt;
            &lt;div&gt;
              &lt;CitySuggestionBar onPlaceChanged={this.showPlaceDetails.bind(this)} /&gt;
              &lt;div&gt;
              &lt;label htmlFor="driving"&gt;Driving&lt;/label&gt;
              &lt;input type="radio" name="transport-type" id="driving" value="DRIVING" 
              onChange={this.onModeChange} defaultChecked /&gt;
              &lt;label htmlFor="transit"&gt;Bus/Train&lt;/label&gt;
              &lt;input type="radio" name="transport-type" id="transit" value="TRANSIT"
              onChange={this.onModeChange} /&gt;
              &lt;label htmlFor="air"&gt;Airways&lt;/label&gt;
              &lt;input type="radio" name="transport-type" id="air" value="AIRWAYS"
              onChange={this.onModeChange} /&gt;
            &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;GoogleMapExample
            containerElement={ &lt;div style={{ height: `500px`, width: '100%' }} /&gt; }
            mapElement={ &lt;div style={{ height: `100%` }} /&gt; }
          /&gt;
        &lt;/div&gt;
     );
     }
  };
  </code></pre>
  
  <p>I have set the default mode to DRIVING in the state and the default radio checked is also DRIVING. However, when I change it to Bus/Train it still appears to be driving on the map. But, the most confusing things is when I switch back to driving the map now updates to Transit and the mode in the state  is driving.</p>
  
  <p>Please Help!
  Thanks in advance.</p>