How to build a Load More button in React

Create a new React project using Create-react-app

Get the posts data

  1. Copy the first 10 posts from here
  2. Create a postsArray.js file inside our src folder and paste the posts in here. Assign the array of posts to a posts variable. Like below. I’m hiding the other 9 posts here, but you should have a total of 10posts.
    Finally, export the posts.

Create a Posts Component

import React from "react";const Posts = ({ postsToRender }) => {return (
<ul>
{postsToRender.map((post, index) => (
<li key={index}>
<strong>{post.id}</strong>
&nbsp;{post.title}
</li>
))}
</ul>
);
};
export default Posts;

Build the logic for the Load more Button

import React, { useState, useEffect } from "react";import Posts from "./Posts";
import posts from "./postsArray";
const postsPerPage = 3;
const arrayForHoldingPosts = [];
const App = () => {
return (
<div>
<Posts />
<button onClick={handleShowMorePosts}>Load more</button>
</div>
);
};
export default App;
const [postsToShow, setPostsToShow] = useState([]);
const [count, setCount] = useState(1);
const loopThroughPosts = (count) => {
for (
let i = count * postsPerPage - postsPerPage;
i < postsPerPage * count;
i++
) {
if (posts[i] !== undefined) {
arrayForHoldingPosts.push(posts[i]);
}
}
setPostsToShow(arrayForHoldingPosts);

};
// load the first set of posts when the page loads
// and then set the value of count to 2
useEffect(() => {
setCount((prevCount) => prevCount + 1);
loopThroughPosts(count);
}, []);
const handleShowMorePosts = () => {
setCount((prevCount) => prevCount + 1);
loopThroughPosts(count);
};
import React, { useState, useEffect } from "react";import Posts from "./Posts";
import posts from "./postsArray";
const postsPerPage = 3;
const arrayForHoldingPosts = [];
const App = () => {
const [postsToShow, setPostsToShow] = useState([]);
const [count, setCount] = useState(1);
const loopThroughPosts = (count) => {
for (
let i = count * postsPerPage - postsPerPage;
i < postsPerPage * count;
i++
) {
if (posts[i] !== undefined) {
arrayForHoldingPosts.push(posts[i]);
}
}
setPostsToShow(arrayForHoldingPosts);

};
// load the first set of posts when the page loads
// and then set the value of count to 2
useEffect(() => {
setCount((prevCount) => prevCount + 1);
loopThroughPosts(count);
}, []);
const handleShowMorePosts = () => {
setCount((prevCount) => prevCount + 1);
loopThroughPosts(count);
};
return (
<div>
<Posts postsToRender={postsToShow} />
<button onClick={handleShowMorePosts}>Load more</button>
</div>
);
};
export default App;

A more efficient way

import React, { useState, useEffect, useRef } from "react"
import Posts from "./Posts"
import posts from "./postsArray"
const App = () => {
const [postsToShow, setPostsToShow] = useState([])
const postsPerPage = 3
let arrayForHoldingPosts = []
const ref = useRef(postsPerPage)
const loopWithSlice = (start, end) => {
const slicedPosts = posts.slice(start, end)
arrayForHoldingPosts = arrayForHoldingPosts.concat(slicedPosts)
setPostsToShow(arrayForHoldingPosts)
}
useEffect(() => {
loopWithSlice(0, postsPerPage)
}, [])
const handleShowMorePosts = () => {
loopWithSlice(ref.current, ref.current + postsPerPage)
ref.current += postsPerPage
}
return (
<div>
<Posts postsToRender={postsToShow} />
<button onClick={handleShowMorePosts}>Load more</button>
</div>
)
}
export default App

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store