ReactJS TypeError: Cannot read property 'setState'

Question

I am new at ReactJS, and I encounter some problems.

I also learned about the ES6 syntax, and it said the following codes are the same meaning.

1.

YTSearch({key: API_KEY, term: 'nba'}, function(videos) {
  this.setState({ videos });
});

2.

YTSearch({key: API_KEY, term: 'nba'}, (videos) => {
  this.setState({ videos });
});

However, the first way threw this error

TypeError: Cannot read property 'setState' of undefined

Answer 1

YTSearch({key: API_KEY, term: 'nba'}, function(videos) {
  this.setState({ videos });
});

Throws an error because here this inside the callback doesn't refer to the context of React Component rather the context of the function itself and hence setState is undefined here.

In the second example

YTSearch({key: API_KEY, term: 'nba'}, (videos) => {
  this.setState({ videos });
});

You are making use of arrow function to bind the function to the context of the react component. Another way to do the same would be to use bind(this)

YTSearch({key: API_KEY, term: 'nba'}, function(videos) {
  this.setState({ videos });
}.bind(this));