Need help to fetch json data with Axios dependancy for react - reactjs

Question

I need help using the axios dependancy on react.
I'm fetching data from this endpoint: https://api.covid19api.com/summary
I setup a config for my API (config.jsx)
import axios from 'axios';
export default axios.create({
baseURL: `https://api.covid19api.com/summary`,
responseType: "json"
});
then i call it in my App, (a class component) as API
import API from './config.jsx';
and execute it within my ComponentDidMount()
componentDidMount() {
API.get().then(res => {
const countries = JSON.stringify(res.data.Countries);
//console.log(countries);
this.setState({ covid: countries });
console.log(`Etat du state: ${this.state.covid}`);
})
}
I get the data, store it in my state named 'covid', but when it comes to map over the results i get an error "TypeError Cannot read property 'map' of null" I think i have to convert the data into an array but i don't know how to do this .
render() {
return (
<div className="App">
<header className="App-header">
<h1>{this.state.appliname}</h1>
{this.state.covid.map(item => (
<div>{item.Country}</div>
))}
</header>
</div>
);
}
Here's the full script on codesandbox: https://codesandbox.io/s/intelligent-faraday-ykewv?file=/src/App.js
Thanks

Answer 1

There are several things you need to consider:
Always handle errors in promises. Sometimes you may face API failure, so you should handle the API request gets failed that we should do. So simply add a catch handler to your promise chain.
You should always handle first data initiation. In the first render of your page, there is no this.state.covid so you can't pass it to your view and map through it, so if you do this it will throw an error. To make this work you should add conditional rendering to your element.
Define your first state initiation correctly. Since you expect your this.state.covid to be an array, so you should define it as an array in the first place (this.state = {covid: []}).
Avoid passing strings to Array#map. When you try to convert your incoming items from API to JSON with JSON.stringify(res.data.Countries) it will make your data as JSON. Since JSON comes with string type it won't fit array helpers like Array#map, when you got your data there is no need to make JSON of the. If in any case, your incoming data was JSON itself you should parse it with JSON.parse().
Working demo:

Answer 2

Set init state default array
this.state = { covid: [], appliname: "CovidFacts" };
Set countries
const countries = res.data.Countries;
Follow all :
import React from "react";
import "./App.css";
import API from "./config.jsx";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
covid: [],
appliname: "CovidFacts"
};
}
componentDidMount() {
API.get().then(res => {
const countries = res.data.Countries;
this.setState({ covid: countries });
console.log(`Etat du state: ${this.state.covid}`);
});
}
render() {
return (
<div className="App">
<header className="App-header">
<h1>{this.state.appliname}</h1>
{this.state.covid.map(item => (
<div>{item.Country}</div>
))}
</header>
</div>
);
}
}
export default App;