i wrote the following code for product page i am being unable to create a function and confused whether to use hooks or simple scrip
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;
if you would run this snippet you will see a product page with several images of product what i want to do is when a user will click any other photo of the product that photo needs to be shown as the new picture for reference https://yasertarek.github.io/ecommerce-product-page/index.html Just guide or explain me concept or any link for that for me i want to do this on my own
Here is a working example of how you can achieve it with useState() hook link to working demo of below code. Give a default active image source and pass the src value of each thumbnail image to the setActiveImage('src here') inside onClick() which should cause re-render and the active image is replaced by the one you clicked on since it's src value is activeImage. I have also attached the styles so you can take a look at it.
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;
}