How to build a load more button in React.

Here’s what we’ll be building.

If you’re here for the full code, you can scroll down to the end.

Create a new React Project using CRA

npx create-react-app load-more && cd load-more

Get the Posts data we will be using

1. We need some dummy data. Copy the first 10 posts from here
2. Create a postsArray.js file inside our src folder and paste the posts inside this postsArray.js file. 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 10 posts.

Finally, export the posts.

3. Now import these posts inside your <App /> component.

Create a Posts Component

4. Next create a Posts component. This component will be responsible for displaying all our posts on the screen. It’ll take a prop of postsToRender. This will be the posts to be displayed. See below.

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

Now Import this component into

Build the logic for the Load more Button

5. Now, head to App.js. We need to specify the number of posts we want to show on each page. For this tutorial we’ll show 3. Let’s define a variable called postsPerPage and assign 3 to it. Let’s also declare an empty array called arrayForHoldingPosts. This array will hold the newly populated posts each time the user clicks Load more.

Finally, create the load more button and pass it an onClick handler of handleShowMorePosts.

Let’s also bring in useState, useEffect and useRef. Our App component will now look like below.

import React, { useState, useRef, useEffect } from "react"
import Posts from "./Posts"
import posts from "./postsArray"

const App = () => {
  const postsPerPage = 3
  let arrayForHoldingPosts = []

  return (
    <div>
      <Posts />
      <button onClick={handleShowMorePosts}>Load more</button>
    </div>
  )
}
export default App

6. Finally, for the full code. We have a function called loopWithSlice that cuts out 3 posts from the array each time the user clicks load more posts.

Within this function, we will also increment ref.current by 3 to slice out the next 3 posts from the postsArray.

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