I want to open the clicked image in react modal

Question

I read many similar questions but they did not work. i want to open the object that clicked in gallery into the modal . My problem is that when a user clicks on a picture to open the modal of last object in the array is opened. I dont know how to make only the modal that is selected to open.

class SingleGallery extends Component{
  constructor () {
    super();
    this.state = {
      showModal: false
    };
    
    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }
  
  handleOpenModal () {
    this.setState({ showModal: true });
  }
  
  handleCloseModal () {
    this.setState({ showModal: false });
  }
  render(){
    let singleGalleryObj = [
      {image: imageGallery1},
      {image: imageGallery2},
      {image: imageGallery3},
      {image: imageGallery4},
      {image: imageGallery1},
      {image: imageGallery2}
    ]
    return(
      <div class="singleGallery">
        <div class="SGContent">
            <div class="title">Gallery 1</div>
            <div class="images">
              {singleGalleryObj.map((para) => {
                  return (
                    <div>
                      <div class="galleryBox" onClick={this.handleOpenModal}>
                        <div class="image">
                          <img src={para.image} />
                        </div>
                      </div>
                      <Modal 
                          isOpen={this.state.showModal}
                          contentLabel="Minimal Modal Example"
                        >
                          <button onClick={this.handleCloseModal}>Close Modal</button>
                          <img src={para.image}/>
                        </Modal>
                    </div>
                      
                  )
                })}
              
            </div>
          </div>
      </div>
    )
  }
} 

Answer 1

I think the problem is with the controller. You only have 1 controller to show or hide the modal. You could have only 1 modal for your render function like

<div class="singleGallery">
    <div class="SGContent">
        <div class="title">Gallery 1</div>
        <div class="images">
          {singleGalleryObj.map((para) => {
              return (
                <div>
                  <div class="galleryBox" onClick={() => this.handleOpenModal(para)}>
                    <div class="image">
                      <img src={para.image} />
                    </div>
                  </div>
                </div>
                  
              )
            })}
          <Modal 
                      isOpen={this.state.showModal}
                      contentLabel="Minimal Modal Example"
                    >
                      <button onClick={this.handleCloseModal}>Close Modal</button>
                      {this.state.selectedImage ? <img src={selectedImage.image}/> : null}
                    </Modal>
        </div>
      </div>
  </div>

and your open modal handler could be like

handleOpenModal (selectedImage) {
   this.setState({ showModal: true, selectedImage });
}

let me know if it's working or not.