Install this package in your project : npm install react-paginate

import { useState, useEffect } from "react";
import swal from "sweetalert";
import ReactPaginate from "react-paginate";


const Myhome = () =>{
    let[allproduct, updateProduct] = useState([]);

    const getProduct = () =>{
        fetch("http://localhost:1234/productlist")
        .then(response=>response.json())
        .then(productArray=>{
            updateProduct(productArray.reverse());
        })
    }

    useEffect(()=>{
        getProduct();
    }, [1]);

    const addtoCart = async (productinfo) =>{
        productinfo["qty"]=1;
        let url = "http://localhost:1234/cartlist";
        let postData = {
            headers:{'Content-Type':'application/json'},
            method:"POST",
            body:JSON.stringify(productinfo)
        };

            await fetch(url, postData)
            .then(response=>response.json())
            .then(serverres=>{
                swal(productinfo.name , " Added in your cart ..", "success");
            })
            .catch(err=>{
                swal(productinfo.name , " Already Exist in your cart ..", "error");
          })
    }

    let[keyword, updateKeyword] = useState("");

    const PER_PAGE = 4;
    const [currentPage, setCurrentPage] = useState(0);
    function handlePageClick({ selected: selectedPage }) {
        setCurrentPage(selectedPage)
    }
    const offset = currentPage * PER_PAGE;
    const pageCount = Math.ceil(allproduct.length / PER_PAGE);

    return(
        <section>
            <div id="banner"></div>
            <div className="container mt-4">
                <div className="row mb-4">
                    <div className="col-lg-4"></div>
                    <div className="col-lg-4">
                        <input type="text" className="form-control" placeholder="Search..."
                        onChange={obj=>updateKeyword(obj.target.value)}/>
                    </div>
                    <div className="col-lg-4"></div>
                </div>

                <div className="row">
                    {
                      allproduct.slice(offset, offset + PER_PAGE).map((product, index)=>{
                        if (product.name.toLowerCase().includes(keyword.toLowerCase())) 
                        {
                            return(
                                <div className="col-lg-3 mb-4" key={index}>
                                    <div className="p-4 shadow">
                                        <h4 className="text-info mb-3 text-center"> {product.name} </h4>
                                        <img src={product.photo} className="rounded" height="140" width="100%"/>
                                        <p className="mt-3"> {product.details} </p>
                                        <p className="m-3">Rs. {product.price} </p>
                                        <p className="text-center">
                                            <button className="btn btn-danger btn-sm"
                                            onClick={addtoCart.bind(this, product)}> 
                                                <i className="fa fa-shopping-cart"></i> Add to Cart 
                                            </button>
                                        </p>
                                    </div>
                                </div>
                            )
                        }
                      })  
                    }
                </div>
            </div>

            <div className="mb-4 mt-4">
                <ReactPaginate
                    previousLabel={"Previous"}
                    nextLabel={"Next"}
                    breakLabel={"..."}
                    pageCount={pageCount}
                    marginPagesDisplayed={2}
                    pageRangeDisplayed={3}
                    onPageChange={handlePageClick}
                    containerClassName={"pagination  justify-content-center"}
                    pageClassName={"page-item "}
                    pageLinkClassName={"page-link"}
                    previousClassName={"page-item"}
                    previousLinkClassName={"page-link"}
                    nextClassName={"page-item"}
                    nextLinkClassName={"page-link"}
                    breakClassName={"page-item"}
                    breakLinkClassName={"page-link"}
                    activeClassName={"active primary"}
                />
            </div>        
            <footer className="bg-primary p-5 mt-5 text-white text-center">
                <p> React Shopping Web Application. Backedn with JSON Server for API</p>
            </footer>
        </section>
    )
}

export default Myhome;