i am trying to have the button hide after all items in the array are returned:

const blogs = [
    {src: "/blog1.png"},
    {src: "/blog2.png"},
    {src: "/blog3.png"},
    {src: "/blog4.png"},
    {src: "/blog5.png"},
];

const Thumbnails = ({ image, index = 0}) => {
    return (
        <Thumbnail className={`Thumbnail image${index}`}>
            <Image src={image.src} />
        </Thumbnail>
    )
}

function BlogMain() {
    const [visible, setVisible] = useState(3);
    const loadMore = () => {
        setVisible((prevValue) => prevValue + 3);
    };

    return (
           <div>
                    <Container>
/*returns all blogs as images  */
                    {blogs?.slice(0, visible).map((image, index) => (
                            <Thumbnails key={index} image={image} index={(index + blogs.length)} >
                        ))}
                    </Container>

 /* want {loadMore} to only render if index < blogs.length. when it reaches blog.length, button should hide / null. */
                    <Button onClick={loadMore}>
                        <ButtonText>Load more</ButtonText> 
                    </Button> 

            </div>
            );
        }

this is wrong, and i am not sure what to do but i am trying to set the function {loadMore} to only render < blogs.length. then at blogs.length to {toHide} button or return null

const [visible, setVisible] = useState(3);
const loadMore = () => {
    setVisible((prevValue) => prevValue + 3);
  };

  const [hide, setHide] = useState(false);
  const toHide = () => {
    setHide((prevValue) => prevValue + blogs.length);
  };

---

  <Button onClick={loadMore}>
  {setHide? {loadMore} <ButtonText>Load more</ButtonText> : null}
  </Button> 

>Solution :

You can just conditionally render the button to only show if visible <= blogs.length:

{visible <= blogs.length && 
  <Button onClick={loadMore}>
    <ButtonText>Load more</ButtonText> 
  </Button> 
}