“react-infinite-scroll-component” Stopped working after one call (loadMore only gets called once)

Question

I use the react-infinite-scroll-component library for pagination,but even though hasMore is true, loadMore is called once.

     <InfiniteScroll
      dataLength={100}
      pullDownToRefreshThreshold={50}
      next={loadMoreConversation}
      scrollableTarget="scrollableDiv"
      hasMore={true}
      loader={<h4>Loading...</h4>}
    >
      <ChatItemList
        chatItems={chatItems}
        isInDeleteMode={deleteActive}
        onBottomDrawerHandler={onBottomDrawerHandler}
      />
    </InfiniteScroll>

Please help me with this, What am I doing wrong?

Answer 1

I had this issue. It turns out I was using dataLength in the wrong way. I thought it was supposed to be the total length of items that could be displayed, but instead, it seems it should be the length of items that are currently displayed, so the correct way is should be something like this:

    <InfiniteScroll
      dataLength={page * 10}
      pullDownToRefreshThreshold={50}
      next={loadMoreConversation}
      scrollableTarget="scrollableDiv"
      hasMore={true}
      loader={<h4>Loading...</h4>}
    >
      <ChatItemList
        chatItems={chatItems}
        isInDeleteMode={deleteActive}
        onBottomDrawerHandler={onBottomDrawerHandler}
      />
    </InfiniteScroll>

in this case, I load 10 items per page. I hope this helps you because I searched a lot and did not find an answer until I reached it with all the effort and error.