How to Load More Data on a Button Click Using React

In today's lesson, we will see how to load more data on a button click using React. Let's assume that we have an e-commerce website and we want to display only two products, and the user can load more products on a button click. So let's see how we can do that.

Load more data on a button click

So in the example below, we display only 2 products from the array, and once the user clicks on the button, the load more method is triggered, and the number of products to show is incremented by 2.

import React,{useState} from 'react';

export default function ProductList() {
  const products = [
    {
        id: 1,
        name: 'Iphone 12',
        price: 700,
        image: 'https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202__480.jpg'
    },
    {
        id: 2,
        name: 'Samsung s10',
        price: 400,
        image: 'https://cdn.pixabay.com/photo/2016/03/27/19/43/samsung-1283938__340.jpg'
    },
    {
        id: 3,
        name: 'Samsung Tv',
        price: 1200,
        image: 'https://cdn.pixabay.com/photo/2019/06/30/18/19/tv-4308538__480.jpg'
    },
    {
        id: 4,
        name: 'Huwawei Mate',
        price: 900,
        image: 'https://cdn.pixabay.com/photo/2017/08/11/14/19/honor-2631271__340.jpg'
    }
  ];
  const [productToShow, setProductToShow] = useState(2);


  const loadMoreProducts = () => {
      if(productToShow >= products.length){
          return;
      }else{
          setProductToShow(prevProductToShow => prevProductToShow + 2);
      }
  }

  return (
    <div className="row my-4">
        {
            products.slice(0, productToShow).map(product => (
              <div className="col-md-4" key={product.id}>
                <div className="card mb-2" style={{width: '18rem'}}>
                    <img src={product.image} className="card-img-top" alt={product.name} />
                    <div className="card-body">
                        <h5 className="card-title">{product.name}</h5>
                        <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <button className="btn btn-primary">
                            <i className="bi bi-cart-check-fill"></i> Add to cart
                        </button>
                    </div>
                </div>
            </div>
            ))
        }
        {
          productToShow < products.length && <div className="my-3">
              <button className="btn btn-danger" onClick={() => loadMoreProducts()}>
                  Looad more
              </button>
          </div>
        }
    </div>
  )
}