hey guys i don't understand why am I getting this error when i want get api from api.Covid19 and it return a object that contain Countries array whenever i want map over Countries i get this error and if i get Countries api separately it work find :| help me plsenter image description here
looping over data.Countries (this is problem section)
and the image below shows what api returns : object return by api
The initial data state is an object with no defined Countries property, so in the component data.countries is undefined and throws error when you attempt to map it.
The https://api.covid19api.com/summary endpoint does return an object with a Countries property.
/ 20211121231605 // https://api.covid19api.com/summary { "ID": "03b65afe-02ad-4835-abb5-9916c44bae85", "Message": "", "Global": { "NewConfirmed": 408370, "TotalConfirmed": 256947981, "NewDeaths": 5200, "TotalDeaths": 5144527, "NewRecovered": 0, "TotalRecovered": 0, "Date": "2021-11-22T06:09:08.91Z" }, "Countries": [ { "ID": "19a0f201-0385-42ee-bfec-cfe99666a87c", "Country": "Afghanistan", "CountryCode": "AF", "Slug": "afghanistan", "NewConfirmed": 32, "TotalConfirmed": 156896, "NewDeaths": 2, "TotalDeaths": 7365, "NewRecovered": 0, "TotalRecovered": 0, "Date": "2021-11-22T06:09:08.91Z", "Premium": { } }, ...
The solution seems to be to provide valid initial state in the provider for what you expect all consumers to render from:
const [data, setData] = useState({ Countries: [] });
Or just use null/checks/guard-clauses or Optional Chaining operator to protect against the null/undefined accesses.
data.Countries && data.Countries.map(country => (
<h2 key={country.ISO2}>
{country.Country}
</h2>
))
...
data.Countries?.map(country => (
<h2 key={country.ISO2}>
{country.Country}
</h2>
))