How can I add descriptions to my slideshow?

Question

I am working on a web app in the ReactJS framework and I'm using react-slideshow-image component for a simple slideshow. However due to how the component works, I can only render the images. I would like to add a short description for each image and have it appear with it. Is there a way to modify this code to render a description under the image? (I was thinking about useEffect hook but I'm not sure.)

const Slideshow = () => {
    return (

       <SlideContainer>
//styled component
           <Zoom scale={0.4}>
//Zoom component comes from react-slideshow-image
               {
                   slideshowImages.map((each, index) => <img key={index} style={{padding: "0", margin: "0", width: "20vw"}} src={each} />)
               }
           </Zoom>
       </SlideContainer>
    )
};

Answer 1

Try this behavior, Here you can show the description on the image.

const images = [
  {
    id: "img1",
    url: "../images/image-1.png",
    description: "image 1 description here"
  },
  {
    id: "img2",
    url: "../images/image-2.png",
    description: "image 2 description here"
  }
];

const Slideshow = () => {
  return (
    <div className="slide-container">
      <Zoom {...zoomOutProperties}>
        {images.map((each, index) => (
          <div
            style={{
              background: `url(${each.url}) no-repeat`,
              width: "300px",
              height: "240px"
            }}
          >
            <b>{each.description}</b>
          </div>
        ))}
      </Zoom>
    </div>
  );
};

Hope you are looking for the same use case.

Working demo:- https://codesandbox.io/s/modest-proskuriakova-28qsk?file=/src/App.js

Answer 2

This wasn't quite what I wanted but it pointed me in the right direction. Here's my solution inspired by yours and official React documentation:

const slideshowImages = [
    {
        id: 1,
        image: "/imageUrl",
        desc: //description
    },
//as many elements as you want
]

const Slideshow = () => {
    //SlideContainer and DescriptionWrapper are styled components
    return (
       <SlideContainer>
           <Zoom {...zoomOutProperties}>
               {
                   slideshowImages.map(
                       (slide) =>
                           <div key={slide.id}>
                               <img style={{padding: "0", margin: "0", width: "20vw"}} src={slide.image} />
                               <DescriptionWrapper>{slide.desc}</DescriptionWrapper>
                           </div>

                       )
               }
           </Zoom>
       </SlideContainer>
    )
};

export default Slideshow;

Thanks a lot, I wouldn't have thought of something like this.