React中用于图像模态的动态CSS类

Question

I'm trying to make a simple photo gallery in React. When I click on the photo preview, I want a modal of the larger image to pop up.

I have this working so far. The modal element itself is originally set to a class with display: none; . My problem is that when I click on one photo, every single modal pops up.

How can I change the class name of one specific modal element so this does not happen?

Here is my code:

 import React, { Component } from 'react'; import images from './../data/images'; import './../css/Photos.css'; class Photos extends Component { constructor(props) { super(props); this.state = { images: images, visible: false, //invisibleClass: 'photo-modal-invisible', visibleClass: 'photo-modal-invisible' }; } /* Applies the appropriate class for the modal when the image is clicked. Class is handled in state. */ handleClick() { const isVisible = this.state.visible; if(isVisible === false) { this.setState({ visible: true, visibleClass: 'photo-modal-visible' }); } else { this.setState({ visible: false, visibleClass: 'photo-modal-invisible' }); } } render() { var correctClass; return( <React.Fragment> <div className="photo-container"> { this.state.images.map((image, index) => <a onClick={ () => this.handleClick() }><img src={ image.imageSrc } key={ index } /></a> ) } </div> { this.state.images.map(( image, index ) => <div className={ this.state.visibleClass } key={ index }> <a href="#" onClick={ () => this.handleClick() }><span class="close">&times;</span></a> <img src={ image.imageSrc } /> </div> ) } </React.Fragment> ); } } export default Photos; 

 .photo-container { height: 100%; width: 100%; margin-top: 50px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; } .photo-container img { width: 300px; height: 300px; margin-right: 30px; object-fit: cover; filter: grayscale(100%); transition: 1s; } .photo-container img:hover { filter: grayscale(0); } .photo-modal-invisible { display: none; } .photo-modal-visible { position: fixed; /* stay in place */ z-index: 1; /* sit on top */ padding-top: 100px; /* location of the box */ left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; background-color: rgb(0, 0, 0); /* fallback color */ background-color: rgba(0, 0, 0, 0.9); /* black with opacity */ } .photo-modal-visible img { margin: auto; display: block; width: 80%; max-width: 700px; } .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } 

Answer 1

You are setting the class name on all the images in the map function which is why all modal images area visible/hidden at the same time.

In the handleClick pass the index of the image and store that index in the state and use that to toggle the modal

Answer 2

Why don't you create another component for a single image and keep the visible state on a single image. So when you click on a single image, it's not affecting other image state.