Code
import { useCallback, useEffect, useState } from "react";
import "./styles.css";
import InfiniteScroll from "react-infinite-scroll-component";
export default function App() {
const [state, setState] = useState([]);
const [data, setData] = useState([]);
const [hasMore, setHasMore] = useState(true);
const [perPage] = useState(20);
const [currentPage, setCurrentPage] = useState(1);
const lastIndex = currentPage * perPage;
const firstIndex = lastIndex - perPage;
const fetchPost = async () => {
const json = await fetch("https://jsonplaceholder.typicode.com/posts");
const result = await json.json();
setState(result);
};
const fetchMore = useCallback(() => {
setTimeout(() => {
setCurrentPage(currentPage + 1);
let d = [...state].slice(firstIndex, lastIndex);
setData((prev) => [...prev, ...d]);
}, 1000);
},[state])
useEffect(() => {
fetchPost();
if (state.length) fetchMore();
}, []);
useEffect(() => {
if (data.length < state.length) {
setHasMore(true);
} else {
setHasMore(false);
}
}, [state]);
console.log({ state, data, lastIndex, firstIndex, currentPage });
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<InfiniteScroll
dataLength={data.length}
next={fetchMore}
hasMore={hasMore}
loader={<h4>Loading...</h4>}
scrollableTarget="scrollableDiv"
>
{data.length &&
data.map((post) => {
return (
<div
style={{
backgroundColor: "green ",
padding: "10px",
margin: "10px"
}}
>
{post.title}
</div>
);
})}
</InfiniteScroll>
</div>
);
}
Top comments (0)