React.js dynamic map directions renderer

Question

I've been wondering how to make a dynamic map directions/route. I am using this plugin Directions Renderer but this is a static example. I just want to make a route using my input fields.

Here's my code:

     /* global google */
       import { default as React, Component,} from "react";
       import { withGoogleMap, GoogleMap, DirectionsRenderer,} from "../../../lib";

const DirectionsExampleGoogleMap = withGoogleMap(props => (
  <GoogleMap
    defaultZoom={7}
    defaultCenter={props.center}
  >
    {props.directions && <DirectionsRenderer directions={props.directions} />}
  </GoogleMap>
));

export default class DirectionsExample extends Component {

 constructor(props) {
    super(props);
    this.state = {
        origin: '',
        destination: '',
    }

    this.handleOrigin = this.handleOrigin.bind(this);
    this.handleDestination = this.handleDestination.bind(this);
}

handleOrigin(event) {
        event.preventDefault()
        this.setState({origin: event.target.value});
    }

handleDestination(event) {
    event.preventDefault()
    this.setState({destination: event.target.value});
}

  componentDidMount() {
    const DirectionsService = new google.maps.DirectionsService();

    DirectionsService.route({
      origin: new google.maps.LatLng(this.state.origin),
      destination: new google.maps.LatLng(this.state.destination),
      travelMode: google.maps.TravelMode.DRIVING,
    }, (result, status) => {
      if (status === google.maps.DirectionsStatus.OK) {
        this.setState({
          directions: result,
        });
      } else {
        console.error(`error fetching directions ${result}`);
      }
    });
  }

  render() {
    return (
      <input type='text' value={this.state.origin} onChange=
         {this.handleOrigin} />
      <input type='text' value={this.state.destination} onChange2=
         {this.handleDestination}/>
      <DirectionsExampleGoogleMap
        containerElement={
          <div style={{ height: `100%` }} />
        }
        mapElement={
          <div style={{ height: `100%` }} />
        }
        center={this.state.origin}
        directions={this.state.directions}
      />
    );
  }
}

Answer 1

to shed some light on your issue, I personally use

    import PlacesAutocomplete from 'react-places-autocomplete';
    import { geocodeByAddress, geocodeByPlaceId } from 'react-places 
    autocomplete';

which creates a nice autocomplete field. And I also use these two npm packages below to display my maps.

    import Map, {GoogleApiWrapper} from 'google-maps-react'
    import Marker from 'google-maps-react'

Hopefully this helps in some way, let me know if you want some help using these packages and I can display some examples, cheers.