CODEWITHSUNDEEP
javascriptreactjsreact-props
saifi33
saifi33

Reputation: 21

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

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 })
  })
}

Upvotes: 0

Views: 69

Answers (1)

Sajeeb Ahamed
Sajeeb Ahamed

Reputation: 6390

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

Upvotes: 1

Related Questions