Если вы переписали компонент так, как он у вас в реальности записан, то такой подход неправильный.
Асинхронный код, в принципе весь код с side effects, выносится в специальные места.
Если надо получить данные при загрузке компонента, используются методы жизненного цикла компонента:
Если вы используете
классовый компонент, то в метод
componentDidMount()
Если
функциональный, то в useEffect()
Если нужно получить их
при событии(клика и т.д.), то в функцию, потом вызывать эту функцию в обработчике события, или же сразу в обработчике все делать.
Также не совсем понятен ваш код запроса.
fetch возвращает promise с response. У response(объект ответа от сервера) есть специальный метод json(), который возвращает тело ответа от сервера в соответствующем формате.
После получения данных их надо сохранить, чтобы использовать при рендере. Можно сохранить в состояние.
Классовый
В конструкторе : this.state = { countries : [] }
this.setState({ countries : data.Countries })
Функциональный
В начале компонента, перед запросом : const [countries, setCountries] = useState([])
setCountries(data.Countries)
Я бы написал следующим образом для данных, которые нужны при загрузке компонента:
const InfoApi = () => {
useEffect(() => {
fetch(`https://api.covid19api.com/summary`)
.then(res => res.json())
.then(data => {
console.log(data)
// работа с data, в data будет все как надо: Countries - объект
setCountries(data.Countries)
})
}, [])
return(
<div className="infoApi">
{countries.map(country => <div>{country.Country}</div>)}
</div>
)
}