React Hooks, API, Axios - reactjs

Question

I have a problem in my axios api calls, i'm using 2 apis in the same function, both of axios calls works good alone but when i combine them i got error in the Country components which i will be posting after, the error is ( map is not a function )
const onSerializeData = () => {
const serializedCountries = serializeCountries(selectedCountries, false);
//Print the Countries
console.log(
`Selected Countries: \n ${JSON.stringify(serializedCountries)}`
);
axios
.get(
`https://restcountries.eu/rest/v2/alpha/${
serializedCountries[serializedCountries.length - 1]
}`
)
.then((responose) => {
const CouAllData = responose.data;
console.log("CouAllData", CouAllData);
setCountryAllData([...CountryAllData, CouAllData]);
})
.catch((error) => {
console.log("Error", error);
});
axios
.get(
`https://corona-api.com/countries/${
serializedCountries[serializedCountries.length - 1]
}`
)
.then((responose) => {
const CouData = responose.data.data; //The Data
setCountryData([...CountryData, CouData]); //set The Data to the OBJ
console.log(" setCountryData", CountryData);
})
.catch((error) => {
console.log("Error", error);
});
};
return (
<div>
<Country countries={CountryData} />
<Country countriesAll={CountryAllData} /></div>
}
Country Component
const DataGroup = this.props.countries.map((county) => {
return <Data info={county} />;
});
const DataGroupAll = this.props.countriesAll.map((country) => {
return <Data infos={country} />;
});
return (
<div>
{DataGroup}
{DataGroupAll}
</div>
Data Component
<h1>Name : {this.props.info.code}</h1>
<h1>Date : {this.props.info.updated_at}</h1>
<h1>Name : {this.props.infos.name}</h1>
<h1>Capital : {this.props.infos.capital}</h1>

Answer 1

Try using axios.all() to perform concurrent requests.
function getCountries() {
return axios.get(
`https://restcountries.eu/rest/v2/alpha/${
serializedCountries[serializedCountries.length - 1]
}`
)
}
function getCountries2() {
return axios.get(
`https://corona-api.com/countries/${
serializedCountries[serializedCountries.length - 1]
}`
)
}
Promise.all([getCountries(), getCountries2()])
.then(function (results) {
const countries = results[0];
const countries2 = results[1];
});