Change imageCaption on click to next -React-image-lightbox

Question

I am making a gallery using "react-image-lightbox". First I display the images using Grid from Material-Ui and then follows documentation from https://www.npmjs.com/package/react-image-lightbox However, I cannot change the imagecaption accordingly onclick on the next or previous. Any lead on how I can solve that part??

import img1 from "../../Image/Process/image1.jpg";
import img2 from "../../Image/Process/image2.jpg";
import img3 from "../../Image/Process/image3.jpg";

const images = [img1, img2, img3];

class GalleryPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      photoIndex: 0,
      isOpen: false,
      caption: null
    };
  }

  render() {
    const { photoIndex, isOpen, caption } = this.state;
    return (
      <div className="gallery-section" id="gallery">
        <div className="mdb-lightbox">
          <Grid container direction="row" justify="center" alignItems="center">
            <Grid container item xs={3} spacing={1}>
              <figure className="frame">
                <img
                  src={img1}
                  alt="Working day"
                  className="img-fluid"
                  onClick={() =>
                    this.setState({
                      photoIndex: 0,
                      isOpen: true,
                      caption:
                        "A regular work day, Photo: Nahida Islam, license: CC0"
                    })
                  }
                />
              </figure>
            </Grid>
            <Grid container item xs={3} spacing={1}>
              <figure className="frame">
                <img
                  src={img2}
                  alt="Pizza break"
                  className="img-fluid"
                  onClick={() =>
                    this.setState({
                      photoIndex: 1,
                      isOpen: true,
                      caption:
                        "A pizza break was needed, Photo: Nahida Islam, license: CC0"
                    })
                  }
                />
              </figure>
            </Grid>
            <Grid container item xs={3} spacing={1}>
              <figure className="frame">
                <img
                  src={img3}
                  alt="The satellite"
                  className="img-fluid"
                  onClick={() =>
                    this.setState({
                      photoIndex: 2,
                      isOpen: true,
                      caption:
                        "The special weapon: Satellite, Photo: Nahida Islam, license: CC0"
                    })
                  }
                />
              </figure>
            </Grid>
          </Grid>
        </div>
        {isOpen && (
          <Lightbox
            enableZoom={false}
            mainSrc={images[photoIndex]}
            nextSrc={images[(photoIndex + 1) % images.length]}
            prevSrc={images[(photoIndex + images.length - 1) % images.length]}
            imageTitle={photoIndex + 1 + "/" + images.length}
            imageCaption={caption}
            onCloseRequest={() => this.setState({ isOpen: false })}
            onMovePrevRequest={() =>
              this.setState({
                photoIndex: (photoIndex + images.length - 1) % images.length
              })
            }
            onMoveNextRequest={() =>
              this.setState({
                photoIndex: (photoIndex + 1) % images.length
              })
            }
          />
        )}
      </div>
    );
  }
}

Answer 1

Check out the example code on the react-image-lightbox Github. You just need another array of captions, similar to your image array. Then use your photoIndex value to get the correct caption. Something like this - I only changed the imageCaption prop so I just removed the others to illustrate that:

const captions = [
    "caption one", "caption two", "last caption"
]

{isOpen && (
  <Lightbox
    imageCaption={captions[photoIndex]}
  />
)}