Threshold not working in Waypoint

[dhairya-bhatia]

I am using Waypoint with Material UI Table . I want to call my API when 4-5 items/rows are pending for the user to see inside the table so that there is enough data always and user has never has to see the loader on the screen. I have tried using threshold but it doesen't seem to work . I am attaching my Code for your reference.

`import React, { useState, useEffect } from "react"; // @material-core import { makeStyles } from "@material-ui/core/styles"; import Table from "@material-ui/core/Table"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableContainer from "@material-ui/core/TableContainer"; import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import Paper from "@material-ui/core/Paper"; //react-waypoint import { Waypoint } from "react-waypoint";

//molecules import CircularLoader from "components/molecules/CircularLoader";

//dummy data import { rows } from "./dummyData";

const useStyles = makeStyles({ table: { minWidth: 650, }, hideLastBorder: { "&:last-child td, &:last-child th": { border: 0, }, }, });

export default function TableInfiniteScrolling({ initialOffSet = 10, generalOffSet = 10, }) { const classes = useStyles(); const [data, setData] = useState([]); const [hasMoreItems, setHasMoreItems] = useState(true); const [isLoading, setIsLoading] = useState(false);

const fetchData = (offset) => {

setIsLoading(true);
let newtableData = [];
for (
  let i = data.length;
  i < data.length + offset && i < rows.length;
  i++
) {
  newtableData.push(rows[i]);
}
if (newtableData.length === 0) {
  setHasMoreItems(false);
}
setData((prevData) => {
  return [...prevData, ...newtableData];
});
setIsLoading(false);

};

useEffect(() => { fetchData(initialOffSet); }, []);

return ( <> <TableContainer component={Paper}> <Table className={classes.table} aria-label="simple table"> <TableHead> <TableRow> <TableCell>ID</TableCell> <TableCell align="right">Name</TableCell> <TableCell align="right">Email</TableCell> <TableCell align="right">Gender</TableCell> </TableRow> </TableHead> <TableBody> {data.map((row, index) => ( <React.Fragment key={index}> <TableRow className={classes.hideLastBorder}> <TableCell component="th" scope="row"> {row.id} </TableCell> <TableCell align="right">{row.name}</TableCell> <TableCell align="right">{row.email}</TableCell> <TableCell align="right">{row.gender}</TableCell> </TableRow> </React.Fragment> ))} </TableBody> </Table> </TableContainer>

  {isLoading && <CircularLoader />}

  {hasMoreItems && (
    <Waypoint
      onEnter={() => fetchData(generalOffSet)}
      threshold={0.5}
    />
  )}
</>

); }`

[Beardificent]

Threshold has been replaced by bottomOffset and topOffset, if I'm not mistaken.