React cannot set property of undefined - reactjs

Question

I'm making a get request using axios. I know for a fact that when I make a get request, I get the correct data.
I have an array (allQuotes) in my constructor. However, when I try to reference it in componentDidMount, it's undefined.
class App extends Component {
constructor() {
super();
this.allQuotes = [];
}
componentDidMount() {
axios.get("http://getquote.herokuapp.com/get")
.then(function (response) {
this.allQuotes = response.data;
console.log(response.data);
this.getNewQuote();
})
.catch(function (error) {
console.log("Error: ", error);
//console.dir(error);
});
}
}
Upon running this, the console says "Cannot set property 'allQuotes' of undefined".
Why is this undefined?

Answer 1

It's better if you put allQuotes in state then you use setState
class App extends Component {
constructor() {
super();
this.state = {
allQuotes: [],
}
}
componentDidMount() {
axios.get("http://getquote.herokuapp.com/get")
.then(function (response) {
this.setState({ allQuotes: response.data })
console.log(response.data);
this.getNewQuote();
})
.catch(function (error) {
console.log("Error: ", error);
//console.dir(error);
});
}

Answer 2

You can use arrow functions to fix this. The problem is because if its another function, this refers to the function, and arrow function doesnt have one, instead it has the this of its referer.
axios.get("http://getquote.herokuapp.com/get")
.then((response)=>{
...
})
.catch( (error)=> {
...
});

Answer 3

Since you are using react, please make use of state.
What is a state ?
state are both plain JavaScript objects within the component and you can use setState to store the value within the component. You can refer https://reactjs.org/docs/faq-state.html
state = {
allQuotes: []
}
componentDidMount() {
axios.get("http://getquote.herokuapp.com/get")
.then(function (response) {
//this.allQuotes = response.data;
this.setState({
allQuotes: response.data
})
console.log(response.data);
this.getNewQuote();
})
.catch(function (error) {
console.log("Error: ", error);
//console.dir(error);
});
}