I am trying to implement an infinite loader for my list of items. I have set up a logic that in my component. Below is the logic I have implemented in the component.
import Text from '../../../Text/Text';
import styles from './DatasetPopOut.css';
import React, { useState, useEffect , useRef} from 'react';
const DatasetPopOut = ({ datasetList, changeDataset, selectedDataSet, fetchMoreDatasetItems}) => {
const [isFetching, setIsFetching] = useState(false);
const myscroll= useRef();
useEffect(() => {
if (isFetching){
}
}, [isFetching]);
useEffect(() => {
myscroll.current.addEventListener("scroll", handleScroll);
return () => myscroll.current.removeEventListener("scroll", handleScroll);
}, []);
function handleScroll() {
if (
myscroll.current.scrollTop + myscroll.current.clientHeight >=
myscroll.current.scrollHeight
) {
setIsFetching(true)
fetchMoreDatasetItems();
}
}
return(
<div className={styles.datasetPopoutWrapper} ref={myscroll}>I am not sure how to write my isFetching() function. The data comes from fetchMoreDatasetItems passed. The data of the list is from the datasetList. Below is my function I'm passing from the parent component.
fetchMoreDatasetItems=() => {
const { dispatch , routeProps: { match: { params: { Aid } } } } = this.props;
if (Aid) {
this.props.dispatch(loadDatasetList({
Aid,
datasetPage: 0,
datasetPageSize: 3,
}));
}
<TableActionList
datasetList,
fetchMoreDatasetItems: this.fetchMoreDatasetItems,
/>TableActionList is the child component where the infinite loader logic is shown in the first code snippet. I am not sure of how to set the page size of the list to a specific number and then concatenate the rest of the data after we reach the bottom. I know that logic has to be in the isFetching() function but I am not sure of how to pass the data from the parents component to the child and create the function. Can anyone help me?