Escribí el siguiente código para la página del producto. No puedo crear una función y estoy confundido sobre si usar ganchos o scripts simples.
import React from 'react' import Prod from '../assets/image-product-1-thumbnail.jpg' import Cart from '../assets/icon-cart.svg' import Prod2 from '../assets/image-product-2-thumbnail.jpg' import Prod3 from '../assets/image-product-3-thumbnail.jpg' import Prod4 from '../assets/image-product-4-thumbnail.jpg' const Hero = () => { return ( <div className='w-full py-[10rem] px-10 bg-white'> <div className='max-w-[1240px] ml-[300px] grid md:grid-cols-2 gap-10'> <img className='h-[520px] w-[100] rounded-lg bg-cover ' src={Prod2} alt="/" /> <div className=' flex-col mt-[50px] ml-[60px]' > <p className='text-orange-500 text-lg text-bold font-bold'>SNEAKER COMPANY</p> <h1 className=' flex flex-col text-4xl font-bold' >Fall Limited Edition Sneakers</h1> <p className=' flex flex-col text-gray-800' >These low-profile sneakers are your perfect casual wear companion. Featuring a durable rubber outer sole, they'll withstand everything the weather can offer. </p> <button className=' ml-4 flex items-center justify-center gap-2 bg-orange-300 hover:bg-orange-500 text-[white] w-[500px] rounded-xl font-large my-6 mx-auto px-10 py-5'><a > <img className='text-white' src={Cart} alt='cart'/> </a>ADD TO CART</button> </div> <div className='max-w-[1240px] ml-0 gap-8 grid grid-cols-4'> <img className=' rounded-lg bg-cover ' src={Prod} alt="/" /> <img className=' rounded-lg bg-cover ' src={Prod3} alt="/" /> <img className=' rounded-lg bg-cover ' src={Prod4} alt="/" /> </div> </div> </div> ); }; export default Hero;si ejecuta este fragmento, verá una página de producto con varias imágenes del producto. Lo que quiero hacer es cuando un usuario haga clic en cualquier otra foto del producto, esa foto debe mostrarse como la nueva imagen para referencia https:// yasertarek.github.io/ecommerce-product-page/index.html Solo guíame o explícame el concepto o cualquier enlace para eso, quiero hacer esto por mi cuenta
Aquí hay un ejemplo práctico de cómo puede lograrlo con el enlace de gancho useState() a la demostración funcional del siguiente código . Proporcione una fuente de imagen activa predeterminada y pase el valor src de cada imagen en miniatura a setActiveImage('src here') dentro de onClick() , lo que debería causar una nueva representación y la imagen activa se reemplaza por la que hizo clic, ya que es el valor src es activeImage . También os adjunto los estilos para que podáis echarle un vistazo.
import {useState} from 'react'; const ModalDemo = () => { const [activeImage, setActiveImage] = useState('https://i.picsum.photos/id/1016/3844/2563.jpg?hmac=WEryKFRvTdeae2aUrY-DHscSmZuyYI9jd_-p94stBvc'); return ( <div className="slider-container"> <div className="slider__active-photo"> <img src={activeImage} alt="active-image" className="active" /> </div> <div className="slider__thumbnails"> <img onClick={() => setActiveImage('https://i.picsum.photos/id/1014/6016/4000.jpg?hmac=yMXsznFliL_Y2E2M-qZEsOZE1micNu8TwgNlHj7kzs8')} src="https://i.picsum.photos/id/1014/6016/4000.jpg?hmac=yMXsznFliL_Y2E2M-qZEsOZE1micNu8TwgNlHj7kzs8" alt="" className="thumbnail" /> <img onClick={() => setActiveImage('https://i.picsum.photos/id/1015/6000/4000.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I')} src="https://i.picsum.photos/id/1015/6000/4000.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I" alt="" className="thumbnail" /> <img onClick={() => setActiveImage('https://i.picsum.photos/id/1018/3914/2935.jpg?hmac=3N43cQcvTE8NItexePvXvYBrAoGbRssNMpuvuWlwMKg')} src="https://i.picsum.photos/id/1018/3914/2935.jpg?hmac=3N43cQcvTE8NItexePvXvYBrAoGbRssNMpuvuWlwMKg" alt="" className="thumbnail" /> </div> </div> ); }; export default ModalDemo; .slider-container { color: white; width: 600px; margin: auto; margin-top: 100px; } .slider-container img { width: 100%; border-radius: 10px; } .slider__thumbnails { width: 600px; display: flex; height: 100px; overflow: auto; justify-content: space-between; margin-top: 20px; } .slider__thumbnails img { width: auto; cursor: pointer; }