React Infinite scrolling with using API

Question

I would like to show each 10 data with infinite scrolling by using yts API. It shows that I can show data by this code https://yts.am/api/v2/list_movies.json?sort_by=download_count&limit=10' and it has limit between 1 - 50, but I want to show data infinitely. It seems has page Parameter.. Do you guys have Idea of how can I show data infinitely?

this is the link of yts API https://yts.am/api#list_movies

this is my code of call API

_getMovies = async()=>{
 const movies = await this._callApi() 
 this.setState({
   movies 
 })
}

  _callApi=()=>{
    return   fetch('https://yts.am/api/v2/list_movies.json?sort_by=download_count&limit=10')
    .then(potato=> potato.json()) 
    .then(json=> json.data.movies)
    .catch(err=>console.log(err))
    }

Krishna Satwaji Khandagale · Accepted Answer · 2018-08-05 08:03:04Z

2

The basic idea behind infinite scoll is get the N number of records from API. That N depends on your screen height, so you will have some height to your each item in your list so divide available screenHeight/ height of each item. Now it will give you some number in N , now take few extra records like 4-5 so that you will have scroll and now check if scrollTop exceeds the scrollHeight property. and when it goes again the call for next page. Thats it, that's how it works.

answered Aug 5, 2018 at 8:03

Krishna Satwaji Khandagale

2,27018 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Infinite scrolling with using API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related