How do I use longitude / latitude gotten from REST api in usestate - react-native

Question

I am new to using Getstate and UseState
Normally this works when i hard code the longitude and latitude its fine, now i want to get the longitude and latitude directly from an entered address.
i have set the values to setstate, but i am new to using setstate , use state.
I have written a Method that should get the address. So upon getting the address should resolve to getting the Longitude / latitude
This gets the Longitude and Latitude Well
GetLongitudeFromAddress = (txtaddress) =>{
let address = txtaddress;
let lng = this.state.Alongitude;
let lat = this.state.Alatitude;
var logLatApi = 'https://maps.googleapis.com/maps/api/geocode/json?address='+address+'&sensor=false&key=AIzaSyBsy6x3mTXbPQ52qk6XMI9u1NgMfn9-YNE';
var header = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};
fetch(
logLatApi,{
method : 'GET',
headers : header
}
).then((response) => response.json())
.then((responseJson)=>{
if(responseJson.status ==='OK')
{
this.setState({longitude: responseJson.results[0].geometry.location.lng});
this.setState({latitude: responseJson.results[0].geometry.location.lat});
}
})
}
Now I want to use this in my setstate / usestate here
const [coordinates] = useState([
{
latitude: 6.450430,
longitude: 3.390460,
},
{
latitude: 6.430980,
longitude: 3.435880,
},
]);
How can I do this? My code in full looks like this :
import React , {useState} from 'react';
import {StyleSheet, View, Dimensions, TextInput} from 'react-native';
import MapView , { Marker , Polyline } from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
this.state = {
Address : '',
Alongitude : '',
Alatitude: '',
};
GetLongitudeFromAddress = (txtaddress) =>{
let address = txtaddress;
let lng = this.state.Alongitude;
let lat = this.state.Alatitude;
var logLatApi = 'https://maps.googleapis.com/maps/api/geocode/json?address='+address+'&sensor=false&key=AIzaSyBsy6x3mTXbPQ52qk6XMI9u1NgMfn9-YNE';
var header = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};
fetch(
logLatApi,{
method : 'GET',
headers : header
}
).then((response) => response.json())
.then((responseJson)=>{
if(responseJson.status ==='OK')
{
this.setState({longitude: responseJson.results[0].geometry.location.lng});
this.setState({latitude: responseJson.results[0].geometry.location.lat});
}
})
}
const ShowMap =() =>{
const [coordinates] = useState([
{
latitude: 6.450430,
longitude: 3.390460,
},
{
latitude: 6.430980,
longitude: 3.435880,
},
]);
return(
<View style={styles.container}>
<MapView
style={styles.maps}
initialRegion={{
latitude: coordinates[0].latitude,
longitude: coordinates[0].longitude,
latitudeDelta: 0.0622,
longitudeDelta: 0.0121,
}}>
<MapViewDirections
origin={coordinates[0]}
destination={coordinates[1]}
apikey="AIzaSyBsy6x3mTXbPQ52qk6XMI9u1NgMfn9-YNE"
strokeWidth={4}
strokeColor="#FD0631"
/>
<Marker coordinate={coordinates[0]} />
<Marker coordinate={coordinates[1]} />
</MapView>
<View style={styles.inputView}>
<TextInput
style={styles.input}
placeholder="Origin"
onChange={this.GetLongitudeFromAddress()}
/>
<TextInput
style={styles.input}
placeholder="Destination"
onChange={this.GetLongitudeFromAddress()}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
maps: {
width: Dimensions.get('screen').width,
height: Dimensions.get('screen').height,
},
inputView:{
backgroundColor: 'rgba(0,0,0,0)',
position: 'absolute',
top: 0,
left: 5,
right: 5
},
input: {
height: 50,
padding: 10,
marginTop: 20,
marginLeft: 10,
marginRight: 10,
fontSize: 18,
borderWidth: 1,
borderRadius: 35,
borderColor: '#EEEEEE',
backgroundColor: 'white',
}
});
export default ShowMap;
Please assist I am a bit confused here. I just need it to dynamically get it and show directions in the map.

Answer 1

To start off, you need a new hook, to get your API to run. Achieve this by using useEffect.
UseEffect with an empty array dependency will only run your API once on load. With the results from the API, use the set method from useState to update the Coordinates variable. You may then see the Coordinates updated dynamically.
const ShowMap =() =>{
const [Coordinates, setCoordinates] = useState();
useEffect(() => {
(async () => {
const result = GetLongitudeFromAddress(param);
setCoordinates(result);
})();
}, []);
return (<Map/>)
}