Question

0

53

Vistas

how to highlight the selected image?

i want when image is clicked, it shows it selected. i have attached code.

const selectedImageHandler=(event)=>{
     setImage(event.target.currentSrc) //state update
}

.image:focus{
border: 2px solid black;

}

    <div className="row"> 
         data.map((imgData,idx)=>(
           <div className={`col gx-0 gy-0 m-1`} key={idx}>
               <img src={imgData} width="100px" height="100px" className={classes.image} onClick={selectedImageHandler} alt=""/>
           </div>)</div>

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-06-30T03:29:43.534Z

you can do something like this

const [selected, setSelected] = useState(null)

.image.selected{
border: 2px solid black;

}

    <div className="row"> 
         data.map((imgData,idx)=>(
           <div className={`col gx-0 gy-0 m-1`} key={idx}>
               <img src={imgData} width="100px" height="100px" className={`${classes.image}${selected === idx? 'selected': ''})} onClick={() => setSelected(idx)} alt=""/>
           </div>)</div>