Skip to content

Instantly share code, notes, and snippets.

Last active July 21, 2023 10:47
  • Star 11 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save onedebos/f0f38e566450e10c8099f5fa206fae38 to your computer and use it in GitHub Desktop.
How to implement a load more button in React
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];
useEffect(() => {
loopWithSlice(0, postsPerPage);
}, []);
const handleShowMorePosts = () => {
loopWithSlice(next, next + postsPerPage);
setNext(next + postsPerPage);
return (
<Posts postsToRender={postsToShow} />
<button onClick={handleShowMorePosts}>Load more</button>
export default App;
Copy link

vinall commented Aug 27, 2020

what is the implementation of postsArray ?

Copy link

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 = [

export default posts

Copy link

vinall commented Aug 28, 2020

Cool.. Thanks this helps

Copy link

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


Copy link

Seung-hwan285 commented Oct 9, 2022

Hi , @onedebos it very simple code thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment