How to Build Dynamic Load More Feature in React Js

Last updated on: by Digamber

This detailed guide will cover how to create the Load More button and display data dynamically by clicking on the Load more button in the React js application.

To build the Load more button in React, we will use the lodash library, bootstrap UI library and a React useState and useEffect hooks in React functional component.

We will use the fetch API and a demo API to fetch the actual data from the server and use the React hooks and lodash javascript utility programmes to show the data using the Load more button.

Lodash is a handy JavaScript library; it is one of the best utility libraries that provides modularity and exponentially elevates web development performance.

We will use the slice method of lodash; slice is a function that creates a slice of array from start-up till the end. This function is used at the place of Array. slice, and it makes sure the dense arrays are returned.

React Js Show Data On Load More Button Click Example

  • Step 1: Build React Project
  • Step 2: Install Bootstrap Module
  • Step 3: Make Component File
  • Step 4: Install Lodash Library
  • Step 5: Implement Load More Logic
  • Step 6: Update Global Component
  • Step 7: Start Development Server

Build React Project

Open the terminal type the given command on the command-prompt and execute command to install the create-react-app tool:

npm install create-react-app --global

You have to run the following command to create a new react project.

npx create-react-app react-demo

Move into the project folder:

cd react-demo

Install Bootstrap Module

Bootstrap drastically reduces the UI component creation time. Hence we are going to install the Bootstrap module in React.

npm install bootstrap

Install Lodash Library

To create the Load more in React component, we need a custom slice function. For using the slice function, we need to install the JavaScript Lodash library.

npm install lodash

Make Component File

Next, head over to src/ folder, create a folder named components/ in this folder you have to create the Posts.js file.

import React from 'react'
function Posts() {
  return (
    <div>
       <h2>React Js Dynamic Load More Button Example</h2>
    </div>
  )
}
export default Posts

Implement Load More Logic

We are now ready to integrate the load more logic in React function component. To build the load more component, we need to use the useState hook.

The useState hook will handle the component data when the user wants to show more data by clicking on the load more button.

Add the code into the components/Posts.js file:

import React, { useState, useEffect } from 'react'
import { slice } from 'lodash'
function Posts() {
  const [post, setPost] = useState([])
  const [isCompleted, setIsCompleted] = useState(false)
  const [index, setIndex] = useState(5)
  const initialPosts = slice(post, 0, index)
  const getData = () => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((json) => setPost(json))
      .catch((e) => console.log(e))
  }
  const loadMore = () => {
    setIndex(index + 5)
    console.log(index)
    if (index >= post.length) {
      setIsCompleted(true)
    } else {
      setIsCompleted(false)
    }
  }
  useEffect(() => {
    getData()
  }, [])
  return (
    <div>
      <h2 className="mb-3">React Js Load More Example</h2>
      {initialPosts.map((item) => {
        return (
          <div
            className="mb-3 card bg-primary p-2 text-dark bg-opacity-25"
            key={item.id}
          >
            <div className="card-body">{item.title}</div>
          </div>
        )
      })}
      <div className="d-grid mt-3 mb-5">
        {isCompleted ? (
          <button
            onClick={loadMore}
            type="button"
            className="btn btn-danger disabled"
          >
            That's It
          </button>
        ) : (
          <button onClick={loadMore} type="button" className="btn btn-danger">
            Load More +
          </button>
        )}
      </div>
    </div>
  )
}
export default Posts

Update Global Component

We have prepared the Posts component, we will register the Posts component in App.js file, make sure to add the code in the file.

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import Posts from './components/Posts'
function App() {
  return (
    <div className="container mt-5">
      <Posts />
    </div>
  )
}
export default App

Start Development Server

In this step, we will show you how to run the development server.

npm start

After the above command invoked, test the app using the given url.

http://localhost:3000

How to Build Dynamic Load More Button in React Js

Conclusion

In this tutorial, we have learned how to create the Load more functionality in React js application using the lodash library and react hooks.

In this React Load more pagination example, we learned how to load more data in React js application.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.