How to use React Infinite Scroll with hooks

Question

First time using react-infinite-scroll-component and am struggling to get it work as intended. At the moment, it calls a loadMore method after fetching the first 2 items (which is what I want), but then it loads the next 3 items (which it should only load 2) and doesn't call the loadMore method again. Can anyone see where i'm going wrong?

I am passing itemsPerPage as props, e.g. 10, so I can set numberOfItemsToDisplay as 10, and then when loadMore gets called, I can increment numberOfItemsToDisplay with the itemsPerPage value.

const dataList = [
    { src: 'http://ww3.sinaimg.cn/mw690/62aad664jw1f2nxvya0u2j20u01hc16p.jpg' },
    { src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvyo52qj20u01hcqeq.jpg' },
    { src: 'http://ww2.sinaimg.cn/mw690/62aad664jw1f2nxvz2cj6j20u01hck1o.jpg' },
    { src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvzfjv6j20u01hc496.jpg' },
    { src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxw0e1mlj20u01hcgvs.jpg' },
    { src: 'http://ww4.sinaimg.cn/mw690/62aad664jw1f2nxw0p95dj20u01hc7d8.jpg' },
    { src: 'http://ww3.sinaimg.cn/mw690/62aad664jw1f2nxvya0u2j20u01hc16p.jpg' },
    { src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvyo52qj20u01hcqeq.jpg' },
    { src: 'http://ww2.sinaimg.cn/mw690/62aad664jw1f2nxvz2cj6j20u01hck1o.jpg' },
    { src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvzfjv6j20u01hc496.jpg' },
    { src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvyo52qj20u01hcqeq.jpg' },
    { src: 'http://ww2.sinaimg.cn/mw690/62aad664jw1f2nxvz2cj6j20u01hck1o.jpg' },
    { src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvzfjv6j20u01hc496.jpg' },
    { src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxw0e1mlj20u01hcgvs.jpg' },
    { src: 'http://ww4.sinaimg.cn/mw690/62aad664jw1f2nxw0p95dj20u01hc7d8.jpg' },
    { src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvzfjv6j20u01hc496.jpg' },
];

const LazyList = ({ itemsPerPage }) => {

const [numberOfItemsToDisplay, setNumberOFItemsToDisplay] = useState(itemsPerPage);
const [hasMore, setHasMore] = useState(true);

const loadItems = () => {
    let items = numberOfItemsToDisplay;
    if (items >= dataList.length) {
        setHasMore(false);
        return;
    }
    setNumberOFItemsToDisplay((items += numberOfItemsToDisplay));
};

return (
    <div data-testid="LazyList" className={styles['pt-lazyList']}>
        <h1>test</h1>
        <InfiniteScroll
            dataLength={numberOfItemsToDisplay}
            next={loadItems}
            hasMore={hasMore}
            loader={<h4>Loading...</h4>}
        >
            {dataList.map((item, index) => {
                const id = index;
                return <img key={id} src={item.src} alt="placeholder" className={styles['pt-lazyList--image']} />;
            })}
        </InfiniteScroll>
    </div>
);
};

Any help would be really appreciated! Thanks

in loaditmes u are increasing the itemstodisplay length shouldn't that be a constant — orangespark, Apr 23 '20 at 14:31
what i want to to is add the itemsPerPage to itemsToDisplay, so when loadItems is called, it increments each time. — Thomas Allen, Apr 23 '20 at 14:34
where are u adding that itemsPerPage u r doing this instead setItemsToDisplay((items += itemsToDisplay)) this will increase the with length of that list everytime loadmore is called — orangespark, Apr 23 '20 at 14:36
also itemsToDisplay.length this is kind of confusing here is this itemstodisplay an array or a count, becoz I saw u did this below items += itemsToDisplay something is wrong here with the data and how u are manipulating it — orangespark, Apr 23 '20 at 14:38
shouldnt this be setNumberOFItemsToDisplay((items += itemsPerPage)); — orangespark, Apr 23 '20 at 14:58
Thanks, that did help. I was also looping through the whole dataList, rather than a list restricted by the numberOfItemsToDisplay. Its working fine now, will post answer below. — Thomas Allen, Apr 23 '20 at 15:04

score 3 · Answer 1 · answered Apr 23 '20 at 15:05

Might not be the cleanest answer, but got it working by not mapping through the whole dataList and creating array of items based on the numberOfItemsToDisplay value:

const [numberOfItemsToDisplay, setNumberOFItemsToDisplay] = useState(itemsPerPage);
    const [hasMore, setHasMore] = useState(true);
    const list = [];

    for (let i = 0; i < numberOfItemsToDisplay; i += 1) {
        list.push(dataList[i]);
    }

    const loadItems = () => {
        let items = list.length;
        if (list.length >= dataList.length) {
            setHasMore(false);
            return;
        }
        setNumberOFItemsToDisplay((items += itemsPerPage));
    };

How to use React Infinite Scroll with hooks

1 Answers1