2

I am currently using react-infinite-scroll-component to paginate the comments from a certain post. There is a button in the comment section which shows a drawer that is supposed to show the paginated comments. The problem is, the react-infinite-scroll-component doesn't work, as it does not fire the "next" function.

Here is the code:

    <div>
      <Drawer
        anchor={"bottom"}
        open={open}
        onClose={handleDrawer}
        style={{ height: "100vh", overflow: "auto", margin: "0px 4px" }}
      >
        <Toolbar>
          <Typography variant="h4" style={{ flexGrow: 1 }}>
            Comments
          </Typography>

          <IconButton onClick={handleDrawer}>
            <CloseIcon />
          </IconButton>
        </Toolbar>
        <Divider />
        <br />
        <CommentForm
          comment={comment}
          handleChange={handleChange}
          handleSubmit={handleSubmit}
        />
        <InfiniteScroll
          dataLength={page}
          next={More}
          hasMore={hasMore}
          loader={
            <>
              <br />
              <CircularProgress />
            </>
          }
          style={{
            overflow: "hidden",
          }}
          scrollThreshold={1}
        >
          <CommentList comments={comments} id={session.id} />
        </InfiniteScroll>
      </Drawer>
    </div>

The drawer is mostly similar to Youtube's comment drawer on the mobile app. Is there anything I am missing here?

Darryl Javier
  • 150
  • 1
  • 3
  • 8

2 Answers2

1

Probably, the problem is the relation with Drawer and Infinite Scroll height. The height of Infinite Scroll is not reaching the right point to trigger next function. If you provide the demo in Codesandbox would be easier to understand.

Caio Henrique Samarone
  • 47
  • 1
  • 9
0

Fixed height of infinite scroll container

<Box sx={{ height: 500 }}>
  <InfiniteScroll
          dataLength={page}
          next={More}
          hasMore={hasMore}
          loader={
            <>
              <br />
              <CircularProgress />
            </>
          }
          style={{
            overflow: "hidden",
          }}
          scrollThreshold={1}
        >
          <CommentList comments={comments} id={session.id} />
  </InfiniteScroll>
</Box>
gunny
  • 1