Skip to content

Instantly share code, notes, and snippets.

@onedebos
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];
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;
@vinall
Copy link

vinall commented Aug 27, 2020

what is the implementation of postsArray ?

@onedebos
Copy link
Author

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

@vinall
Copy link

vinall commented Aug 28, 2020

Cool.. Thanks this helps

@jeffceriello
Copy link

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

Thanks

@Seung-hwan285
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