Clash Royale CLAN TAG

Load more when scrolled to bottom in Reactjs

This is my post-card page(only the specific part) where i am displaying data from fetched Api.

fetchMoreData(){
this.setState({
index: this.state.index + 5
})
}
componentDidMount(){
window.addEventListener('scroll', this.onScroll);
this.fetchMoreData();
}

onScroll = () => {
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
this.fetchMoreData();
}
});
}


As My API is a testing API i fetch all the data in my posts page and then pass it to my post-card page so on change of this.state.index it displays more item.

The issue I am facing is that I get an error that this.fetchMoreData() is not a function. Feel free to point out any mistakes.

2 Answers
2

Make fetchMoreData an arrow function just like onScroll

fetchMoreData

onScroll

fetchMoreData = () => {
...
}


onScroll = () => {
$(window).scroll(() => {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
this.fetchMoreData();
}
});
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.