Breaking News: Grepper is joining You.com. Read the official announcement!

retrieve next data pagination scroll reactjs

Grieving Gharial answered on March 14, 2023 Popularity 1/10 Helpfulness 1/10

answer retrieve next data pagination scroll reactjs

retrieve next data pagination scroll reactjs

Comment

const listInnerRef = useRef();
const [currPage, setCurrPage] = useState(1); // storing current page number
const [prevPage, setPrevPage] = useState(0); // storing prev page number
const [userList, setUserList] = useState([]); // storing list
const [wasLastList, setWasLastList] = useState(false); // setting a flag to know the last list

useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get(
        `https://api.instantwebtools.net/v1/passenger?page=${currPage}&size=10`
      );
      if (!response.data.data.length) {
        setWasLastList(true);
        return;
      }
      setPrevPage(currPage);
      setUserList([...userList, ...response.data.data]);
    };
    if (!wasLastList && prevPage !== currPage) {
      fetchData();
    }
  }, [currPage, wasLastList, prevPage, userList]);

const onScroll = () => {
    if (listInnerRef.current) {
      const { scrollTop, scrollHeight, clientHeight } = listInnerRef.current;
      if (scrollTop + clientHeight === scrollHeight) {
        // This will be triggered after hitting the last element.
        // API call should be made here while implementing pagination.
      }
    }
  };

return (
  <div
  onScroll={onScroll}
  ref={listInnerRef}
>
  <!-- List Items -->  
</div>);

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: blog.saeloun.com

Tags: javascript next reactjs

Link to this answer
Share Copy Link

Contributed on Mar 14 2023

Grieving Gharial

0 Answers Avg Quality 2/10

retrieve next data pagination scroll reactjs

Contents

More Related Answers

retrieve next data pagination scroll reactjs

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.