CODEWITHSUNDEEP
reactjspaginationmaterial-uiinfinite-scrollreact-infinite-scroll-component
Darryl Javier
Darryl Javier

Reputation: 170

react-infinite-scroll not working inside Material UI Drawer

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?

Upvotes: 3

Views: 1283

Answers (2)

gunny
gunny

Reputation: 1

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>

Upvotes: 0

Caio Henrique Samarone
Caio Henrique Samarone

Reputation: 87

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.

Upvotes: 1

Related Questions