How to implement a load more button in React

App.jsx

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

import Posts from "./Posts";
import posts from "./postsArray";
const postsPerPage = 3;
let arrayForHoldingPosts = [];

const App = () => {
  const [postsToShow, setPostsToShow] = useState([]);
  const [next, setNext] = useState(3);

  const loopWithSlice = (start, end) => {
    const slicedPosts = posts.slice(start, end);
    arrayForHoldingPosts = [...arrayForHoldingPosts, ...slicedPosts];
    setPostsToShow(arrayForHoldingPosts);
  };

  
  useEffect(() => {
    loopWithSlice(0, postsPerPage);
  }, []);

  const handleShowMorePosts = () => {
    loopWithSlice(next, next + postsPerPage);
    setNext(next + postsPerPage);
  };

  return (
    <div>
      <Posts postsToRender={postsToShow} />
      <button onClick={handleShowMorePosts}>Load more</button>
    </div>
  );
};

export default App;

what is the implementation of postsArray ?

I'm not showing it here but it's shown in the tutorial itself.

postsArray.js is a file that holds and exports an array of post objects.

I.e you'll have something like

const posts = [
{id:1,...}
]

export default posts

Cool.. Thanks this helps

Hi, how would I go and reset the pagination on route change (when going back to that posts list page)?

Thanks

Hi , @onedebos it very simple code thank you