Infinite Scroll for Blog Posts

Infinite Scroll of blogposts

import React, { useState, useEffect } from 'react';

const PostList = () => {
  const [posts, setPosts] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [hasMorePosts, setHasMorePosts] = useState(true);

  useEffect(() => {
    fetchInitialPosts();
  }, []);

  const fetchInitialPosts = async () => {
    // ... Fetch posts for page 1 and update state
  };

  const fetchMorePosts = async () => {
    // ... Update currentPage, fetch posts for the new page, and update state
  };

  const handleScroll = () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight && hasMorePosts) {
      fetchMorePosts();
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div>
      {posts.map((post) => (
        <Post key={post.id} {...post} />
      ))}
      {hasMorePosts && <p>Loading more posts...</p>}
    </div>
  );
};

export default PostList;