Question 66397 in Javascript Question posted in
A very good W3school tutorial can be found here.

hide button after all items in array are returned react – Javascript

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>
Tags:

3

Answers


  1. 0

    Welcome

    Your code has multiple issues, firstly you are only trying to hide the button text and not the whole button, and your toHide function is setting value to the sum?? Why not boolean?

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

useEffect(() => {
  if (visible >= blogs.length) {
    setHide(true);
  }
}, [visible]);
// Check to setHide to false, if visible increases every time it changes

return (
  <div>
    <Container>
      {blogs?.slice(0, visible).map((image, index) => (
        <Thumbnails key={index} image={image} index={index + blogs.length} />
      ))}
    </Container>
    {!hide && (
      <Button onClick={loadMore}>
        <ButtonText>Load more</ButtonText>
      </Button>
    )}
  </div>
);

    This should help you, let me know if I can help-you further.

    Login or Signup to reply.
  2. 0

    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> 
}
    Login or Signup to reply.
  3. 0

    I’m not sure it will help you, but I would try something like that

    const [isLoadButtonActive, setIsLoadButtonActive] = useState(true);
        
const loadMore = () => {
  setVisible((prevValue) => {
    if ((prevValue + 3) <= blogs.length) {
      return prevValue + 3
    };

    setIsLoadButtonActive(false);
    return blogs.length;
};
        
<Button onClick={loadMore} disabled={isLoadButtonActive}>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search