Display single an image or a video without a slideshow in react js-CodePudding

I want to display image or video without slideshow if it it only one. Please help me for edit my code.

Here is my code but this returns with carousel everytime.

(gallery) ? (
  <Carousel variant="dark" interval={null}>
    {gallery
      .filter((item) => item.postid == post.id)
      .map((galleryitem) => {
        if (galleryitem.type == "video") {
          return (
            <Carousel.Item key={galleryitem.id}>
              <center>
                <video controls>
                  <source
                    src={"/images/"   galleryitem.name}
                    type="video/mp4"
                  />
                </video>
              </center>
            </Carousel.Item>
          );
        } else {
          return (
            <Carousel.Item key={galleryitem.id}>
              <center>
                <img
                  src={"/images/"   galleryitem.name}
                  alt={galleryitem.name}
                />
              </center>
            </Carousel.Item>
          );
        }
      })}
  </Carousel>
) : (
  <></>
);

CodePudding user response：

Using the code you have here you could change your ternery to be:

gallery.filter((item) => item.postid == post.id).length > 1 ? 
    <Carousel /> : <NotCarousel />

I suspect there's a better way to filter the gallery variable in a useEffect or similar, but without seeing the rest of the code hard to be sure.

You'll also need to figure out what you want to do if the filter returns zero results, filtering your gallery variable earlier will help with that.

Either way, the above should solve your immediate issue.