DEV Community

Adebola
Adebola

Posted on

22 1

How to create a load more button in React.

load more button in react

Here's a preview of what we'll be building.

Let's get into it.

Create a new react project using CRA

npx create-react-app loadmore

Get some sample posts.

  • Get them from here
  • Put these posts in a postsArray.js file and export them like below. posts exported from postsArray.js

Create a component to display posts

  • This component will accept a prop called postsToRender. We will pass this prop from our App 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;
Enter fullscreen mode Exit fullscreen mode

App.js. The main bit!

I'll quickly run through what we'll be doing before showing the code.
In App.js, import the posts from postsArray.js.

  • create a variable called postsPerPage for the number of additional posts to show each time the user clicks the load more button.
  • Declare a variable called arrayForHoldingPosts to hold the posts before we display them.
  • create a load more button and give it an onClick handler called handleShowMorePosts
  • create the handleShowMorePosts function that will run each time the load more button is clicked.

Now the code!

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;

Enter fullscreen mode Exit fullscreen mode

If you want to see the App.js code in a cleaner form, check out the github gist.

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (4)

Collapse
 
raulbarriga profile image
raulbarriga

I used this article to give me better guidance on this npm gallery package called Pro Gallery from WIx in React. They have a playground to test its settings & then generate the boilerplate code for it. But I'm trying to use their load more button & I just can't seem to grasp my head around how to pass get it to show more images. Maybe you can check it out & give some suggestions on how to use it. Thanks.

Collapse
 
evansitworld profile image
Evans Ansong

This is great! thanks Ade

Collapse
 
tylerwashington888 profile image
Tyler-Washington888

I got this functionality to work but, when working in react, once I click away from the page with this function and comeback my data duplicates. How do i get it to refresh back to the original data?

Collapse
 
tylerwashington888 profile image
Tyler-Washington888

to be clearer how do i get the state to refresh once I leave this screen and comback ?

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay