У меня есть очень простой кусок кода. Я могу нажать на карту, и она показывает маркер с определенными координатами. Работает отлично. onMapClick устанавливает markerPosition для широты и долготы (работает нормально)

Но теперь я хочу показать координаты в HTML. Я пробовал Coordinates are {this.props.markerPosition} но this.props.markerPosition всегда равно нулю. Как я могу получить значение markerPosition?

 import React from 'react'; import { compose, withStateHandlers } from "recompose"; import { InfoWindow, withGoogleMap, withScriptjs, GoogleMap, Marker } from 'react-google-maps'; const Map = compose( withStateHandlers(() ={amp}gt; ({ isMarkerShown: false, markerPosition: null }), { onMapClick: ({ isMarkerShown }) ={amp}gt; (e) ={amp}gt; ({ markerPosition: e.latLng, isMarkerShown:true }) }), withScriptjs, withGoogleMap ) (props ={amp}gt; {amp}lt;GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }} onClick={props.onMapClick} {amp}gt; {props.isMarkerShown {amp}amp;{amp}amp; {amp}lt;Marker position={props.markerPosition} /{amp}gt;} {amp}lt;/GoogleMap{amp}gt; ) export default class MapContainer extends React.Component { constructor(props) { super(props) } render() { return ( {amp}lt;div style={{ height: '100%' }}{amp}gt; {amp}lt;Map googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvcDy5ZYc2ujCS6TTtI3RYX5QmuoV8Ffw" loadingElement={{amp}lt;div style={{ height: `100%` }} /{amp}gt;} containerElement={{amp}lt;div style={{ height: `400px` }} /{amp}gt;} mapElement={{amp}lt;div style={{ height: `100%` }} /{amp}gt;} /{amp}gt; Coordinates are {this.props.markerPosition} {amp}lt;/div{amp}gt; ) } } 

Рабочий пример здесь: https://stackblitz.com/edit/react-snxake