Unhandled Rejection (TypeError): can't access property "country", this.props is undefined

Question

i'm working on a react app

when run this function by infinite scroll i'll get error

Unhandled Rejection (TypeError): can't access property "country", this.props is undefined

async pageUpdater() {
  let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&apiKey=myapi&page=${this.state.page}&pageSize=${this.props.pageSize}`;
  this.setState({ loading: true })
  await fetch(url).then(response => response.json()).then(data => {
    this.setState({ articles: data.articles, totalResults: data.totalResults, loading: false })
  })
}

Answer 1

You have to use the arrow function or need to bind the this with this function.

The JavaScript has the function scope and the this pointer is changed on the function scope.

For example-

const pageUpdater = async () => {
 // your code here
}

or

You also could bind the this with the function at the component connstructor.

constructor() {
  this.pageUpdater = this.pageUpdater.bind(this);
}

For more about this read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this