How to make a transition between photos in the gallery?

Question

JavaScript

I'm making a gallery. Clicking on the photo opens a modal window with the image in full screen. I would like to make it possible to switch between photos using the "Left" and "Right" buttons through a modal window, I just don't understand how to do it yet.
There is a gallery component that, using map, renders an array with photos, the data about which is stored in a separate file. Here is part of the gallery component:

<div className="inner-section">
                <Fade bottom>
                  {
                    photos.map(item => <GalleryPhoto 
                      key = {item.id}
                      imgSrc = {item.photo}
                      photoId = {item.id}
                    />)
                  }
                </Fade>
                <ModalImage />
              </div>

Just in case - here's what an array with photo data looks like:

const photos = [{
    photo: "./images/img1.jpg",
    id: 1,
    caption: "",
  }, 
  {
    photo: "./images/img2.jpg",
    id: 2,
    caption: "",
  }];

This is what the rendered photo component looks like. A function is passed to it from React Context to open a modal window and props with data about the location of the image and its id. This function simply sets the state from modalOpen: false to true, and also inserts the location data of the photo into the imageSRC state.

export default class GalleryPhoto extends Component {
  render() {

    const {imgSrc, photoId} = this.props;

    return (
      <ProductConsumer>
        {value => {
          const {handleModal} = value;
          return (
            <div className="gallery-image">
              <img onClick={() => handleModal(photoId, imgSrc)} src={imgSrc} alt="" />
            </div>
          )
        }}
      </ProductConsumer>
    )
  }
}

This is what the function itself looks like.

handleModal = (id, photo) => {
      this.setState({
        modalOpen: !this.state.modalOpen,
        imageSRC: photo,
      }, console.log(id, this.state.imageSRC))
    }

Thus, a modal window opens on clicking on the photo. Here is the window component:

export default class ModalImage extends Component {
    render() {
        return (
            <ProductConsumer>
                {value => {
                    const {modalOpen, imageSRC, handleModal} = value;
                    return (
                        <div className={"modal-container " + (modalOpen ? "visible" : '')}>
                            <button className="btn move-btn">Left</button>
                            <div className="modal-image-container">
                                <img src={imageSRC} alt=""/>
                            </div>   
                            <button className="btn modal-close-btn" onClick={handleModal}>Close</button> 
                            <button className="btn move-btn">Right</button>
                        </div>
                    )
                }}
            </ProductConsumer>
        )
    }
}

Now I want to be able to switch between pictures on the Left and Right buttons, and not constantly click on Close and open something else. And so that the change is guided by id, and not by photo titles, because not all photo titles correspond to their id. How to do it?

Answer 1

it is better to make a modal separately, put it in the gallery, in the gallery store the id of the current photo that you want to show in the modal in the state.
when clicking on a photo, put this id in the id of the clicked photo and show the modal, pass this id to it.
when clicking left-right, change the id to the next/previous one, the modal will be redrawn with a new id, in the modal take the desired url from the list with a photo