DirectionsRenderer для отправления и назначения в качестве реквизита

Question

Я использую библиотеку DirectionsRenderer response-google-maps для рендеринга пункта назначения между двумя точками.Я хотел бы передать пользовательские реквизиты для источника и назначения в функции жизненного цикла componentDidMount, но pathCoordinates для источника и назначения выдает ошибку, чтобы сказать неопределенный.Каков наилучший способ передать эту информацию для визуализации мест назначения и маркеров происхождения.

... all the right imports

const Map = compose(
    withGoogleMap,
    lifecycle({
        componentDidMount() {
            const DirectionsService = new google.maps.DirectionsService();

            DirectionsService.route({
                origin: pathCoordinates[0],
                destination: pathCoordinates[1],
                travelMode: google.maps.TravelMode.DRIVING,
            }, (result, status) => {
                if (status === google.maps.DirectionsStatus.OK) {
                    this.setState({
                        directions: result,
                    });
                } else {
                    console.error(`error fetching directions ${result}`);
                }
            });
        }
    })
)(props =>
    <GoogleMap
        defaultZoom={13}
        defaultCenter={props.pathCoordinates[0]}
    >
        {props.directions && <DirectionsRenderer directions={props.directions} />}
    </GoogleMap>
);

class MapOverlay extends Component {
    render() {
        const trip = this.props.trip;

        return (
            trip.status !== '' ?
                <Map
                    containerElement={<div style={{ height: `400px` }} />}
                    mapElement={<div style={styles.map} />}
                    pathCoordinates={
                        [
                            { lat: trip.pickUp.coordinates[1], lng: trip.pickUp.coordinates[0] },
                            { lat: trip.dropOff.coordinates[1], lng: trip.dropOff.coordinates[0] }
                        ]
                    }
                />
                : null
        );
    }
}

Answer 1

Доступ к этим реквизитам возможен через this.props.pathCoordinates:

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

    DirectionsService.route({
      origin: this.props.pathCoordinates[0], 
      destination: this.props.pathCoordinates[1], 
      travelMode: google.maps.TravelMode.DRIVING,
    }, (result, status) => {
      if (status === google.maps.DirectionsStatus.OK) {
        this.setState({
          directions: result,
        });
      } else {
        console.error(`error fetching directions ${result}`);
      }
    });
}

Демо