I am trying to store the latitude and longitude values I calculated inside the function. If I console.log
both the values inside the function, it is working fine. However, if I return those values to use them somewhere else, then I cannot do so (it throws an error in the console as having this coordinates
list as undefined). Whatever I am returning from this Geocoding
function, it shows undefined in the console. Here is the code snippet:
function Geocoding() {
axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: enteredAddress,
key: 'my API key here'
}
})
.then(function (response) {
var lat = response.data.results[0].geometry.location.lat;
var lng = response.data.results[0].geometry.location.lng;
return [lat, lng];
})
.catch(function (error) {
console.log(error);
});
}
const submitHandler = (event) => {
event.preventDefault();
var coordinates = Geocoding();
const userInput = { //object
location: {
latitude: coordinates[0],
longitude: coordinates[1],
maxDistance: enteredDistance
},
instrumentType: enteredInstrumentType,
awardNumber: enteredAwardNumber,
includeRetired: enteredIRI
};
props.onSaveUserInput(userInput);
setEnteredAddress('');
setEnteredDistance('');
setEnteredInstrumentType('');
setEnteredAwardNumber('');
setEnteredIRI('');
};
The problem is that the Geocoding
is not returning anything. Anyway, I'd convert the code to async
/await
if possible so it's easier to comprehend. Take a look below at the same code fixed with async
/await
.
async function Geocoding() {
try {
const response = await axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: enteredAddress,
key: 'my API key here'
}
})
var lat = response.data.results[0].geometry.location.lat;
var lng = response.data.results[0].geometry.location.lng;
return [lat, lng];
} catch (error) {
console.error(error)
throw error;
}
}
const submitHandler = async (event) => {
event.preventDefault();
var coordinates = await Geocoding();
const userInput = { //object
location: {
latitude: coordinates[0],
longitude: coordinates[1],
maxDistance: enteredDistance
},
instrumentType: enteredInstrumentType,
awardNumber: enteredAwardNumber,
includeRetired: enteredIRI
};
props.onSaveUserInput(userInput);
setEnteredAddress('');
setEnteredDistance('');
setEnteredInstrumentType('');
setEnteredAwardNumber('');
setEnteredIRI('');
};
Notice that to call Geocoding
you need to use also async
/await
or use the Promise.then
like Geocoding().then((coordinates) => {...})