Load more

import React from 'react'
import { Button } from 'react-bootstrap'
//Images 
import placeholderImg from '../../../Assets/dist/img/placeholder_card.jpg'

const LoadMore = () => {
    const imageGallery = [
        { img: placeholderImg, alt: 'Card img cap' },
        { img: placeholderImg, alt: 'Card img cap' },
        { img: placeholderImg, alt: 'Card img cap' },
        { img: placeholderImg, alt: 'Card img cap' },
        { img: placeholderImg, alt: 'Card img cap' },
        { img: placeholderImg, alt: 'Card img cap' },
        { img: placeholderImg, alt: 'Card img cap' },
        { img: placeholderImg, alt: 'Card img cap' },
        { img: placeholderImg, alt: 'Card img cap' },
    ];

    const imagePerRow = 4;
    const [next, setNext] = useState(imagePerRow);

    const handleLoadMore = () => {
        setNext(next + 2);
    }
  return (
    <div id="load_more_1" className="row">
        {imageGallery?.slice(0, next)?.map((image, index) => (
            <div className="col-lg-3 col-sm-4 col-xs-12 target-load-element" key={index}>
                <div className="card">
                    <img className="card-img" src={image.img} alt={image.alt} />
                </div>
            </div>
        ))}
        <div className="text-center mt-5">
            {next < imageGallery?.length ?
                <Button variant="primary" className="load-more" onClick={handleLoadMore}>Load More</Button>
                :
                <Button variant="primary" className="load-more" disabled>No Content</Button>
            }
        </div>

    </div>
  )
}

export default LoadMore;