I want to open the clicked image in react modal - 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.