Can I export values from an arrow function in ReactJS? - reactjs

Question

I'm trying to use pass lng lat variables to the a google maps component from a google's geocode API, however since the geocode function is an arrow function I'm unable to use the values outside of this function. Is there any way to fix this? I need to be able to use the constants lat and lng from the geocode function and pass them to the lat and lang properties in the MapWithMarker constant
Geocode.fromAddress("5th Avenue New York").then(
response => {
const{ lat, lng } = response.results[0].geometry.location;
},
error => {
console.error(error);
}
);
const MapWithAMarker = withGoogleMap(props =>
<GoogleMap
defaultZoom={0}
defaultCenter={{ lat: lat, lng: lng }}
>
<Marker
position={{ lat: lat, lng: lng }}
/>
</GoogleMap>
);
./src/components/dashboard/ProductDetails.js
Line 107: 'lat' is not defined no-undef
Line 107: 'lng' is not defined no-undef
Line 110: 'lat' is not defined no-undef
Line 110: 'lng' is not defined no-undef

Answer 1

One way of doing this is
var MapWithAMarker;
Geocode.fromAddress("5th Avenue New York").then(
response => {
const{ lat, lng } = response.results[0].geometry.location;
MapWithAMarker = withGoogleMap(props =>
<GoogleMap
defaultZoom={0}
defaultCenter={{ lat: lat, lng: lng }}
>
<Marker
position={{ lat: lat, lng: lng }}
/>
</GoogleMap>
);
}
)
.catch(err => console.log(err));
And then you do use it like
if( MapWithAMarker ){
// do whatever you want;
}

Answer 2

You can cache them such as:
const MyMapComponent = function(props) {
const [position, setPosition] = React.useState();
React.useEffect(() => {
Geocode.fromAddress("5th Avenue New York").then(
response => {
setPosition(response.results[0].geometry.location);
},
error => {
console.error(error);
}
);
}, [])
if (!position) {
return null;
}
return <MapWithAMarker {...props} lat={position.lat} lng={position.lng} />
}
const MapWithAMarker = withGoogleMap(props =>
const
<GoogleMap
defaultZoom={0}
defaultCenter={{ lat: props.lat, lng: props.lng }}
>
<Marker
position={{ lat: props.lat, lng: props.lng }}
/>
</GoogleMap>
);
And now you can use MyMapComponent as a decorator of MapWithAMarker.