hi i am using this pacakge
but it not working on ionic react
it shows the first page, then it not loading more.
if anyone has any idea and can help me.
const [loading, setLoading] = useState(false);
const [productTotal, setProductTotal] = useState(0);
const [currentPage, setCurrentPage] = useState(0);
const [pageSize, setPageSize] = useState(5);
const [loadedEnd, setLoadingEnd] = useState(false);
const [productso, setProductso] = useState()
this is my function , with axios
const showPlaces = () => {
if (!loading || !loadedEnd) {
setLoading(true);
axios
.get(`https://walkin-start.herokuapp.com/api/places/`, {
params: {
currentPage: currentPage + 1,
pageSize,
},
})
.then((res) => {
console.log('places=>', res.data);
setProductTotal(productTotal + res.data.length);
setProductso(productso.concat(res.data));
setCurrentPage(currentPage + 1);
setLoading(false);
if (res.data.length < pageSize) {
setLoadingEnd(true);
}
});
}
};
this is the component
<InfiniteScroll
dataLength={productTotal}
next={showPlaces}
hasMore={!loadedEnd}
// hasChildren={true}
// loader={<div className="m-5" > <Spinner type='grow' color='primary' /></div>}
loader={
<div
style={{
display: 'flex',
justifyContent: 'center',
paddingBottom: '2rem',
}}
>
<h1>elias</h1>
</div>
}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>All tours are loaded</b>
</p>
}
>
<AllProductList products={productso} />
</InfiniteScroll>
this is loading the first pageSize of 5, then it stops loading…
Anyone can help me please.