click an image and add class to it but when selectin other one remove the class

I have multiple images which I can select from a carousell. These images are rendered from a map function like this:

 {imagenesProductos.map((img) => {
                  if (img) {
                    console.log(img);
                    return (
                      <SwiperSlide className="">
                        <Image onClick={e => clickedImage(e)} className="product" src={img} width={100} height={100} alt='productImage' />
                      </SwiperSlide>
                    )
                  }
  })}
              

When I click the image I have a method that just console logs the src of the image.

  const clickedImage = (e) => {
    console.log(e.target.src)
  }

What I want to do is to add a class to the selected image and remove it when I select another one. I am using styled components.

I hope you can help me! Thanks in advance.

>Solution :

You should have a state that holder an identifier of this specific selected image. For example:

const [selectedPath,setSelectedPath]=useState('');

Than, in the map you can add a condition with this state, and use the className where you need.

 {imagenesProductos.map((img) => {
                  if (img) {
                    console.log(img);
                    return (
                      <SwiperSlide className="">
                        <Image onClick={clickedImage} className=`product ${img===selectedPath?"selected":""}` src={img} width={100} height={100} alt='productImage' />
                      </SwiperSlide>
                    )
                  }
  })}

And the clickImage function should be:

 const clickedImage = (e) => {
    console.log(e.target.src);
    setSelectedPath(e.target.src);
  }