Javascript 如何在单击时在图像之间切换？

我在画廊工作。点击模式打开弹出，在其中我想让它可以切换图像之间的“左”和“右”按钮。 有一个图库，它使用map方法渲染imageg数组：

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

这是主要的图像组件。我传递一个函数或打开一个模式窗口，其中包含图像源和图像id的数据。此函数只需将modalOpen:false的状态设置为true，并将有关图像src的数据插入到imageSRC状态中

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>
    );
  }
}

这将在单击照片时打开模式窗口。以下是它的组成部分：

<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>;

左边
接近
赖特
;

现在我想用左右键在图片之间切换。有人知道怎么做吗

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

<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>;