React Dynamic Load More Button with List Component Tutorial

React dynamic Load more data example; Load more button is beneficial and empowers user experience by showing the results to the users.

If you are new to React development, this guide is for you.

This comprehensive tutorial will ascertain how to create a load more button, fetch results from the server using a real api and display or load the data in react app using React hooks.

The Load more button is a valuable element in user interface design. It stays at the bottom of the web page; it helps users load more data as per their needs.

Theoretically, when you react at the bottom of the web page, you can see the manifestation of the Load more button; it indicates that you can download more data.

Ideally, other elements are available for loading more data, and you can rely on pagination and infinite Load more apart from the Load more button. However, the Load more button offers an exemplary implementation with lazy loading.

How to Display Data using Load More Button in React Js

  • Step 1: Install React App
  • Step 2: Add Lodash Module
  • Step 3: Add Bootstrap Library
  • Step 4: Show Load More in Dynamic List
  • Step 5: Register Component in App Js
  • Step 6: View App in Browser

Install React App

The first thing we do when to develop a React app is to install the latest version of React application.

You can install a new react app using the provided command:

npx create-react-app react-blog

After you installed the app, enter into the app directory:

cd react-blog

Add Lodash Module

Lodash offers handy JavaScript methods that powers up the JavaScript development, use the suggested command to install the lodash library.

npm install lodash

Add Bootstrap Library

Bootstrap is not essential, but we are installing it to get rid of writing the css code from scratch.

npm install bootstrap

Show Load More in Dynamic List

Create components/User.js folder and file in src/ folder, and write the this code into the file.

import React, { useEffect, useState } from 'react'
import { slice } from 'lodash'

function User() {
  const [user, setUser] = useState([])
  const [isFinished, setIsFinished] = useState(false)
  const [index, setIndex] = useState(4)
  const initialUsers = slice(user, 0, index)

  const fetchRes = () => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((json) => setUser(json))
      .catch((error) => console.log(error))
  }

  const showMore = () => {
    setIndex(index + 5)
    console.log(index)
    if (index >= user.length) {
      setIsFinished(true)
    } else {
      setIsFinished(false)
    }
  }

  useEffect(() => {
    fetchRes()
  }, [])

  return (
    <div>
      <h2 className="mb-4">React Dynamic Load More Example</h2>
      {initialUsers.map((item) => {
        return (
          <div className="mb-2 card" key={item.id}>
            <div className="card-body">{item.name}</div>
          </div>
        )
      })}
      <div className="d-grid mt-3 mb-5">
        {isFinished ? (
          <button
            onClick={showMore}
            type="button"
            className="btn btn-info disabled"
          >
            Nothing left ...
          </button>
        ) : (
          <button onClick={showMore} type="button" className="btn btn-dark">
            Load more
          </button>
        )}
      </div>
    </div>
  )
}

export default User

Update Global Component

The main component in React is located at the App.js file, we need to register the User component in that file.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import User from './components/User'

function App() {
  return (
    <div className="container mt-3">
      <User />
    </div>
  )
}

export default App

Start Development Server

App has been created, but we don’t know how it is working. For that, we have to run the react server using the following command.

npm start

Type the provided url on the address bar of the browser and hit enter.

http://localhost:3000

React Dynamic Load More Button with List Component Tutorial

Conclusion

In this guide, we have discovered how to build a react application with the Load More feature from scratch. To build the Load more functionality in React, we created a react app using function component and react useEffect and useState hooks.

We created a list using bootstrap and showed you how to load more data in the list with Load more options.