In this article, I am going to show how to implement loadmore button using API and simple array data

How to implement Load more button in React js from fetching API data and Array 

First, we will see how to implement load more buttons using array data then we will see API implementation

Create a React app using

npx create-react-app appname

• Once successfully create app then create a folder named component under the src folder
• Create a file named data.js under the component folder and paste the below code

import web from "../images/service.svg"
import app from "../images/s2.svg"
import android from "../images/s3.svg"
import digital from "../images/s4.svg"
import marketing from "../images/s5.svg"
import software from "../images/s6.svg"


const data = [
   {
       id: 1,
       img: web,
       title: "Web Development",
       desc: 'desc 1'
   },
   {
       id: 2,
       img: app,
       title: "Web Development",
       desc: 'desc 2'
   },
   {
       id: 3,
       img: android,
       title: "Android Development",
       desc: 'desc 3'
   },
   {
       id: 4,
       img: digital,
       title: "Digital Development",
       desc: 'desc 4'
   },
   {
       id: 5,
       img: marketing,
       title: "Marketing Development",
       desc: 'desc 5'
   },
   {
       id: 6,
       img: software,
       title: "Software Development",
       desc: 'desc 6'
   },

];
export default data
 

You can see I have import images from the image folder

• Make a directory named page under the component folder
• Make a file named service.js under the page directory

Service.js

import React, { useState } from 'react';
// import data from './data'
import data from "../data"

const Service = () => {
   const [noOfElement, setnoOfElement] = useState(4);
   const loadmore = () => {
       setnoOfElement(noOfElement + noOfElement);
   }

   const slice = data.slice(0, noOfElement);
   return (
       <div className="section-bg">
       <section id="Service" className="py-4 container">
           {/* <h1 className="my-4 display-5 text-center">Our Services</h1> */}
           <div className="section-title">
               {/* <h2>Clients</h2> */}
               <p>Our Service</p>
           </div>
           <div className="row justify-content-center">
               {slice.map((item, index) => {
                   return (
                       <div className="col-11 col-md-6 col-lg-3 mx-0 mb-4">
                           <div className="card p-0 overflow-hidden h-100 shadow">
                               <img src={item.img} className="card-img-top" alt="img" />
                               <div className="card-body">
                                   <h5 className="card-title">{item.title}</h5>
                                   <p className="card-text">{item.desc}</p>

                               </div>

                           </div>

                       </div>

                   )
               })}


           </div>

           <button className="btn-get-service"
               onClick={() => loadmore()}
           >
               Lodemore
           </button>


       </section>
       </div>
   );
};

export default Service

• Make a file named Home.js and paste the below code

import React from "react";
import Service from "./Service"

export const Home = () => {
 return (
   <>
     <Service />
   </>
 );
};

npm start

Our Load more button working successfully done

Now we are going to implement the same for API calliing

Service.js

import React, { useState,useEffect } from 'react';
// import data from "../data"

const Service = () => {
   const [allData,setAllData]=useState([]);
   const [petCount, setDataCount]= useState(4);
   const loadmore =()=>{
      setDataCount(allData.length)
   };
   useEffect(()=>{
       fetch('http://127.0.0.1:8000/api/productlist')
       .then ((res)=> res.json())
       .then ((data)=>{
           setAllData(data)
       });
   },[])
   return (
       <div className="section-bg">
           <section id="Service" className="py-4 container">
               <div className="section-title">
                   {/* <h2>Clients</h2> */}
                   <p>Our Service</p>
               </div>
               <div className="row justify-content-center" >
               {allData.slice(0, petCount).map((pet, id) => (
                   <div className="col-11 col-md-6 col-lg-3 mx-0 mb-4">
                   <div className="card p-0 overflow-hidden h-100 shadow">
                           <img  src={"http://127.0.0.1:8000/" + pet.file_path} className="card-img-top" alt="img" />
                           <div className="card-body">
                               <h5 className="card-title">{pet.ProductName}</h5>
                               <p className="card-text">{pet.description}</p>

                           </div>
                       </div>
                  </div>))}
           </div>
           <button className="btn-get-service"
            onClick={() => loadmore()}
           >
               Lodemore
           </button>
           </section>
       </div>
   );
};

export default Service

For API you have to replace this code only