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.
You can use a state to track clicked images. if the current image in the map is a selected image then you can add a class active or anything you like. I am using index as key as list of image wouldn’t change often I suppose.
Following is the sample code for it.
const [curImageIndex, setCurImageIndex] = useState(null);
const clickedImage = (index) => {
setCurImageIndex(index);
};
return (
<>
{magenesProductos.map((img, index) => {
if (img) {
console.log(img);
return (
<SwiperSlide
className={`product ${curImageIndex === index? 'active' : ''}`}
key={index}
>
<Image
onClick={() => clickedImage(index)}
className="product"
src={img}
width={100}
height={100}
alt="productImage"
/>
</SwiperSlide>
);
}
})}
</>
);
Use a single state to hold the currently selected image. Filter imagenesProductos before mapping. Compare the currently mapped img to the stored selectedImage state to conditionally add the other class to the image.
const [selectedImage, setSelectedImage] = React.useState(null);
...
const clickedImage = (e) => {
const { src } = e.target;
console.log(src);
setSelectedImage(src);
}
...
{imagenesProductos
.filter(img => img)
.map((img) => {
console.log(img);
return (
<SwiperSlide className="">
<Image
onClick={clickedImage}
className={["product", selectedImage === img ? "newClass" : ""].join(" ")}
src={img}
width={100}
height={100}
alt='productImage'
/>
</SwiperSlide>
);
}
})}
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);
}