Access variable outside render

Question

I'm having a problem in my code. I already can make a marker on the map with lat and lng. But I want to display a simple span with the coordinates under the map. I try to access this.props.markerPosition and it's null in render.

What is the issue here?

https://stackblitz.com/edit/react-snxake

const WrappedMap = compose(
    withStateHandlers(() => ({
        isMarkerShown: false,
        markerPosition: null
      }), {
        onMapClick: ({ isMarkerShown }) => (e) => ({
            markerPosition: e.latLng,
            isMarkerShown:true
        })        
      }),
    withScriptjs,
    withGoogleMap
    )
    (props =>
        <GoogleMap
            defaultZoom={8}
            defaultCenter={{ lat: -34.397, lng: 150.644 }}
            onClick={props.onMapClick}
        >
            {props.isMarkerShown && <Marker position={props.markerPosition} onClick={props.onMarkerClick} defaultOptions={{ styles: mapStyles}} />}
        </GoogleMap>
    )

export default class ParkingSpotsSettings extends React.Component {

    state = {
        evaluationExecuted: false,
        evaluation: false
    };

    constructor() {
        super();
        this.state = {
            coordinates: [],
            title: '',
            description: '',
            capacity: 0
        }
      }

    componentDidMount() { }


    render() {
   
        return (
            <div className="App">
                <Navigation />
                <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-6" style={{ width: "100vw", height: "40vh" }}>
                            <WrappedMap googleMapURL={`https://maps.googleapis.com/maps/api/js?key=v=3.exp&libraries=geometry,drawing,places`}
                            loadingElement={<div style={{ height: "100%" }} />}
                            containerElement={<div style={{ height: "100%" }} />}
                            mapElement={<div style={{ height: "100%" }} />}
                            />
                            </div>

                            <span>Coordinates are: {this.props.markerPosition}</span>
                    </div>
                </div>
            </div >
        );
    }
}

LInk taking ages to open. Would you rather simplify with your sample code in the question so we can help? — Piper2
@Piper2 check my code please. Basically I want to access markerPosition inside render so I can display the coordinates when the user creates a Marker in the map — user12361681

oemera oemera · Accepted Answer · 2019-12-24T21:57:50

0

votes

Your prop is called position not markerPosition. So you need to use this.props.position.

Access variable outside render

1 Answers