App.js

import "./App.css";

import InfiniteScroll from "react-infinite-scroll-component";
import { useEffect, useState } from "react";
import Comment from "./components/Comment";
import Loader from "./components/Loader";
import EndMsg from "./components/EndMsg";


function App() {
  const [items, setItems] = useState([]);

  const [hasMore, sethasMore] = useState(true);

  const [page, setpage] = useState(2);

  useEffect(() => {
    const getComments = async () => {
      const res = await fetch(
        `https://rss.dinamalar.com/internal/wnews.asp?id=31`
        // For json server use url below
        // `http://localhost:3004/comments?_page=1&_limit=20`
      );
      const data = await res.json();
      setItems(data);
    };

    getComments();
  }, []);

  const fetchComments = async () => {
    const res = await fetch(
      `https://rss.dinamalar.com/internal/wnews.asp?id=31`
      // For json server use url below
      // `http://localhost:3004/comments?_page=${page}&_limit=20`
    );
    const data = await res.json();
    return data;
  };

  const fetchData = async () => {
    const commentsFormServer = await fetchComments();

    setItems([...items, ...commentsFormServer]);
    if (commentsFormServer.length === 0 || commentsFormServer.length < 20) {
      sethasMore(false);
    }
    setpage(page + 1);
  };
  return (
    <>
   <h2 className="card-title text-center mt-2 h5"> Dinamalar Listing Page - Infinite Scroll </h2>

    <InfiniteScroll
      dataLength={items.length} //This is important field to render the next data
      next={fetchData}
      hasMore={hasMore}
      loader={<Loader />}
      endMessage={<EndMsg />}
    >
      <div className="container">
        <div className="row m-2">
          {items.map((item) => {
            return <Comment key={item.guid} item={item} />;
          })}
        </div>
      </div>
    </InfiniteScroll>
    </>
  );
}

export default App;