Acabo de empezar a aprender JS y React, y necesito ayuda para comprender cómo acceder a las propiedades de las imágenes en matrices... Pude descubrir cómo alternar las imágenes asignadas, pero al final, no pude averiguar cómo manipular cada imagen individual sin obtener muchos errores en mi consola. Traté de usar "index.length" para ayudarme, pero me faltan algunos pasos en mi lógica.

Traté de buscar en el sitio web, pero siento que todavía no puedo entender por dónde empezar.

 import "./Products.css"; import product1 from "../src/images/image-product-1.jpg"; import product2 from "../src/images/image-product-2.jpg"; import product3 from "../src/images/image-product-3.jpg"; import product4 from "../src/images/image-product-4.jpg"; export default function ProductGallery() { let [mainImage, setMainImage] = useState(product1); let [opacity, setOpacity] = useState(""); let images = [ { photo: product1 }, { photo: product2 }, { photo: product3 }, { photo: product4 }, ]; function clickImage(e) { setMainImage(e.target.src); setOpacity(!opacity); if ((e.target.style.opacity = 0.7)) { setTimeout(() => {}, 100); } } return ( <div className='gallery col-md-6'> <img src={mainImage} alt='product shoes' className='main-image' /> <section className='extra-images'> {images.map((image, index) => { return ( <div key={index}> <img src={image.photo} onClick={clickImage} alt={index} style={{ opacity: opacity ? 0.7 : 1, }} /> </div> ); })} </section> </div> ); }