How to use fetch() API in React to setState

Question

I\'m trying to write a component in React that will use the fetch() API to get data from a website, then use setState to set a state equal to the data, and then finally rend

Answer 1

• this refers to the object which calls the function.
• every normal function has its own this however arrow functions does not (this here refers to the outside context i.e., what this is outside the function.).

So the possible solutions are

• Use Arrow function

componentDidMount = () => {
    fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent').then(
            function(response){
                return response.json();
            }
            ).then(function(jsonData){
                return JSON.stringify(jsonData);
            }
            ).then(function(jsonStr){
                this.setState({apiInfo: jsonStr});
                console.log(jsonStr);
            });
}

• save this in some other variable earlier and pass it as argument.
• Bind this to the function

https://reactjs.org/docs/handling-events.html