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