Loading data in set of 10 items

Here is the problem statement

  • Make a list of colleges using the JSON attached in a zip file.

  • There will be two colleges in a row and in the beginning, we will show 10 colleges and after that, once we get scrolled to the last college, we will append the next 10 colleges and so on until the whole JSON gets parsed. ( basically, implement infinite scroll )

I am doing this in React and showing data in individual cards but I am rendering all 100 items. the problem is to write a function in javascript which only returns 10 items from 100 available and on reaching end, 10 more items should be loaded like replicating an API call.

How to go about writing this function.

What you’re talking about is pagination.

There are different ways to do this. Since the data is already loaded (not a paginated API call) that makes things easier.

Basically, you have a list of colleges to render in either state or props, the first ten from the list. You need a way to know when you have scrolled to the bottom so you can push the next 10 onto that list, or slice of a greater chunk, or however you’re dividing it up.