I have this exported const in one file useLocation.tsx where I get the user's location and retrieve the user's county, state/province, and country. I also have an exported const in another file useCountryData.tsx where I fetch the COVID cases and deaths from an API. There is a variable in useLocation.tsx that is called countryNameshort. How do I use this variable in useCountryData.tsx?
useLocation.tsx
export const useLocation = () => { var [stateName, setstateName] = useState(String); var [countyName, setCountyName] = useState(String); var [countryName, setCountryName] = useState(String); var [stateNameshort, setstateNameshort] = useState(String); var [countryNameshort, setCountryNameshort] = useState(String); const [latitude, setlatitude] = useState(Number); const [longitude, setlongitude] = useState(Number); const [location, setLocation] = useState(Object); const [errorMsg, setErrorMsg] = useState(String); useEffect(() => { (async () => { if (Platform.OS === "android" && !Constants.isDevice) { setErrorMsg("Oops, this will not work on Snack in an Android emulator. Try it on your device!" ); return; } let { status } = await Location.requestPermissionsAsync(); if (status !== "granted") { setErrorMsg("Permission to access location was denied"); return; } let location = await Location.getCurrentPositionAsync({}); setLocation(location); const latitude = location.coords.latitude; setlatitude(latitude); const longitude = location.coords.longitude; setlongitude(longitude); })(); }, []); let text = "Waiting.."; if (errorMsg) { text = errorMsg; } else if (location) { text = JSON.stringify(location); } fetch("https://maps.googleapis.com/maps/api/geocode/json?address=" + latitude +"," + longitude +"&key=" + apiKey ) .then((response) => response.json()) .then((responseJson) => { const resState = responseJson.results[0].address_components.filter( (x: any) => x.types.filter((t: Object) => t == "administrative_area_level_1") .length > 0 )[0].long_name; setstateName(resState); const resCounty = responseJson.results[0].address_components.filter( (x: any) => x.types.filter((t: Object) => t == "administrative_area_level_2") .length > 0 )[0].long_name; setCountyName(resCounty); const resCountry = responseJson.results[0].address_components.filter( (x: any) => x.types.filter((t: Object) => t == "country").length > 0 )[0].long_name; setCountryName(resCountry); const resStateShort = responseJson.results[0].address_components.filter( (x: any) => x.types.filter((t: Object) => t == "administrative_area_level_1") .length > 0 )[0].short_name; setstateNameshort(resStateShort); const resCountryShort = responseJson.results[0].address_components.filter( (x: any) => x.types.filter((t: Object) => t == "country").length > 0 )[0].short_name; setCountryNameshort(resCountryShort); if (countryNameshort === "US") { countryNameshort = "US" +"A"; } }) .catch((err) => { console.log(err); }); return { countryName, countyName, stateName, stateNameshort, countryNameshort }; };useCountryData.tsx
import { useLocation } from './useLocation';export const useCountryData = () => { const [earliest2, setEarliest2] = useState([]); const [countryDeaths, setcountryDeaths] = useState(Number); const [countryCases, setcountryCases] = useState(Number); useEffect(() => { axios .get("https://coronavirus-19-api.herokuapp.com/countries") .then((response) => { setEarliest2(response.data); const countryArray = response.data.filter( (item) => item.country === props.countryNameshort //??? ); const resCountryDeaths = countryArray[0].deaths; setcountryDeaths(resCountryDeaths); const resCountryCases = countryArray[0].cases; setcountryCases(resCountryCases); console.log("hiiii", countryCases); }) .catch((err) => { console.log(err); }); }, []); return { countryCases, countryDeaths };};