I want to fetch a country's population from a json API. To do this, I'd like to pass in an array in props. In FetchPopulation, I use hooks to get the array latest
and I return it. Then, in DataScreen, I declare the variable from FetchPopulation. However, the latest
array is empty here. I know you can directly fetch the population from FetchPopulation, but I need the array for different purposes. How can I do this?
This is my current setup:
FetchPopulation.tsx
export const FetchPopulation = () => {const [latest, setLatest] = useState([]);useEffect(() => { axios .get("https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-population.json" ) .then((response) => { setLatest(response.data);}) .catch((err) => { console.log(err); }); } }, []);return { latest,};};
DataScreen.tsx
const DataScreen = () => { const { latest } = FetchPopulation(); return (<View><PopulationCard latest={latest} /></View> )}
PopulationCard.tsx
type Props = { latest: Array<Number>}const Population = (props: Props) => { const countryArray = props.latest.filter( (item) => item.country === mappedLocation.country, ); const population = countryArray[0].population; return (<View><Text>{population}</Text></View> )}