ReactJS - commands do not run in desired order - reactjs

Question

I am trying to build a find nearby restaurants app in ReactJS and I am having a problem with displaying array data on the first run of this command below.
What happens is that the first time I fetch data with axios it only load location. The second time I fetch data it also renders the array data on the interface.
I think the problem is with the order of the command I run in this function and on the first run it tries to fetch undefined lat & lng, then after the second time we run it in the same session it renders based on what lat & lng was fetches with the previous run of the function.
Here's the code:
currentLocationOnClick = async () => {
let { lat, lng } = this.state;
const URL = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${lat},${lng}&type=restaurant&radius=${5 *
1000}&key=AIzaSyBpd_v1C8RFh0D39Al97ANZ-eJLO3zrKAQ`;
navigator.geolocation.getCurrentPosition(
position => {
this.setState({ lat: position.coords.latitude });
this.setState({ lng: position.coords.longitude });
},
error => {
console.log('Error getting location');
}
);
let places;
try {
const response = await axios.get(URL);
console.log(response.data);
places = response.data.results;
} catch (error) {
console.log(error.message);
}
this.setState({ places });
};

Answer 1

navigator.geolocation.getCurrentPosition is an async function, meaning the function call does not block until it finished.
one way of fixing this would be to put your axios call in position callback.
For example, something like this:
async position => {
const URL = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${position.coords.latitude},${position.coords.longitude}&type=restaurant&radius=${5 *
1000}&key=AIzaSyBpd_v1C8RFh0D39Al97ANZ-eJLO3zrKAQ`;
const response = await axios.get(URL);
console.log(response.data);
places = response.data.results;
this.setState({ places });
},
Another nicer, solution would be to wrap navigator.geolocation.getCurrentPosition so it's an awaitable function.
something like this:
function getCurrentPosition()
{
return new Promise(resolve => navigator.geolocation.getCurrentPosition(position => resolve(position)))
}
Then you could use it something like this:
let position = await getCurrentPosition();
const URL = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${position.coords.latitude},${position.coords.longitude}&type=restaurant&radius=${5 *
1000}&key=AIzaSyBpd_v1C8RFh0D39Al97ANZ-eJLO3zrKAQ`;
const response = await axios.get(URL);