All right, so we have three components that we need to tackle, and I think it just makes the most
sense to start with images.
And essentially what we're looking for is a one man image.
And then we have a bunch of images that we can click on.
And then, of course, once we click on an image that becomes that main image.
Now, I have to be honest, in order to save a little bit of time for all the products, these extra
images are exactly the same.
So, of course, when we talk about that main image, each product has the unique one.
But when we talk about those extra images that I would want to only display on a single product page,
of course there will be all the same since I thought that adding some unique images for every product
is just going to be a bit too time consuming.
So we're going to navigate right now to the product images.
But one thing that this component is looking for is the images array.
So we need to pass it in.
And of course, we can call it images that also make sense.
And I'll just say that, yep, we're passing in images pop into the product images.
So now, of course, we can navigate when we have the product images and let's think about it.
I mean, we have done this already quite a few times.
I should be some kind of use state variable that has that main image.
And we can use the index.
We can say, yeah, first I would want to display the first image and then as I'm clicking, of course,
I'll change that state index.
And as I'm changing that index, of course, the value in the main one will also change.
So first, I'm just going to get the images out.
And just so I can see that there's no trickery in there, I'm going to go with log and images.
Now, we'll have to do a little bit of more functionality in here, and I'll talk about it when we get
there.
So I'm going to go here.
Notice in the beginning it is undefined and then it is an array of five items.
So now what I would want is to set up some kind of use state variable.
By the way, this just imported the icon that I wasn't looking for, so.
I have the U.S. state and I would want to set up that main image, and again, this is something we
have done already in the earlier projects.
So I'm going to go with Consed and then mind.
So that is going to be my main image.
That's the one that I'm going to display as a bigger image.
And by default, it's going to be the first image in my.
All right.
So here we go with the function set man.
And that one will be equal to use, use and state and will pass in the images that we're getting back.
And like I said, I would want to start with zero.
Correct.
Since I would want to display the first image.
Now, there's going to be a bit of a gotcha where I remember initially that value was undefined.
I mean, if you don't remember, then again, we will need to go back and comment this out.
But initially this was undefined and only then we managed to get the.
All right.
So the problem here is that I'm setting up my item, the main one, to be equal to the first item in
array.
Correct.
But initially, images is undefined.
Remember, it was undefined and only then we had our array.
So I would want to use the S6 default parameters where I'm going to say if the images is undefined,
that is just going to be an empty.
All right.
So once we save that, we're not getting this error.
So initially it is just going to be empty.
Right.
And then eventually, of course, we will get our images.
So that's a start.
And then remember, this is going to be our first image.
So if you want to console the main, that should be the object.
Now in the object, what we're looking for.
Well, it's going to be DRL this is where the image is sitting.
So there's a bunch of other info.
But what we're looking for is this Eora and the way we'll set up our turn is in the following way.
So I'm going to go with the wrapper and then there's going to be two things.
There's going to be that main image and then the div, so the gallery where I'll display all the images.
So we're going to go here with HMG.
And then as far as the source, we're going to go with Main and then Yoro.
So that's going to be the main property.
And remember, on that object, the property we're looking for was euro.
And as far as the name, well, I'm just going to go with some kind of main image, like, OK, that's
going to be the alternative.
And then, like I said, I would also want to have my gallery now for the time being, I just say I'm
not see whether we're going to get that main image.
And then once we say course, we have one more error.
So why is that happening?
Well, now, not only I'm getting the first item, but then from that first item, I'm looking for the
euro.
So now we will need to update the default value where I'm going to say if.
The images is undefined and there's going to be an camera with empty object, and I'll just say that
you are all to be empty string.
Again, the only reason why I'm doing that, because initially images is undefined.
And in here I'm going right away and checking for a property on the object that is actually undefined.
So once I say we should fix everything and now, of course, we can see the image on this case and I'm
going to go to the hundred and that's how our image is going to look like.
Now, I do want to add a class name for styling.
So we're going to go here with a main source and of course, our image is going to be smaller, and
after that I would want to set up my gallery.
So there's going to be a div with class gallery show and I'm going to iterate over my images.
So we're going to see a map here and we're iterating over.
And of course for every image or turn a smaller one.
Correct.
So every item is going to be represented by the name of image.
And I also would want to get the index because that's how we will control the state over here, because
each image has the index and by default, I'm showing the first one.
That's why I went with zero.
But then as I'm clicking on that image, of course I'll change this value in the state.
So I'm going to go with a return.
I'm returning for now.
Just use the source here and we'll set up image.
So that's going to be my object.
So each and every image has that property and then, of course, we'll save it.
Now there's going to be some errors, the warning meaning some warnings, because we didn't set up the
key.
But the important part is that, of course, we can see the images now.
At the moment, nothing is happening, but at least we have two things.
We have, of course, the main image as well as the gallery of images.
And then again, the main image we get by getting the first item from the array and then using the euro
property, since that's where the image is setting.
And what few things I would need to add.
And as far as the alternative, you know what?
Let me just check what was in the main, what was in the object, what I want to double check.
So initially, notice, we just have this dummy value for the euro, but then eventually, of course,
we have all of these ones.
And I think I can just use the filename for the alternative.
So I'm going to go back and we're going to go for alternative.
We're going to use a marriage and then file name.
Ma'am, hopefully the property is exactly the same filename.
And then also we would need to have a key.
Remember, we have a list, of course, in this case.
So I'm going to set this equal to the index.
And then once I click on the images now, of course, I would want to change that index.
All right.
So once I change it, then, of course, this image, the one that I have clicked on, will become that
main one.
So in the beginning, I'm just looking for this image, the first one.
But then, of course, I can pass in this one, the one that I'm clicking on.
And the way we do that, we go with on Click.
And now it set up our our function.
And once we click on it, we'll say set mine and we just change that image so we change the object.
Initially, we set up our main image to be our first one.
Now I'm just going to say images.
So that's mirror and then whatever is the index of this particular image.
So this is one.
And of course, I will set the image which has the index of one to be my main one and I'll save it.
And I think I can remove the control log and notice.
How can I click click on images.
And then of course I'm changing that main one.
And then the last thing that I would want to add is the active class.
Notice how when I'm clicking on these images, I'm adding a little blur around these images.
So that just signals that that is the main image that I'm displaying.
And the way we can set that up is simply checking whether the image URL matches the URL that is coming
from the main.
If that is the case, then I know that of course, this is the image that I'm displaying.
So in here, let's go with class name again.
We'll set up our expression since we need to use a template literal.
And I'm just going to check if the image Yoro, the one that is coming from this particular item, matches
to the Manero what that means.
Well, that means that image, of course, is the main one right now.
So it can set up our tearing operator.
And if that is the case, I would want to have the active class.
If not, then I'm just going to add more and what you'll notice and whether we're here should have spelled
this correctly.
We have the now and there it is now, first image, of course, has this active class because this is
how we set it up over here.
And every time I click, I change that main YORO.
And as I'm changing that value, well, I'm also getting that a nice ball all around.
And before we go over the functionality one more time, let me just fix here the access issue and I'm
going to go back to single product.
And I think the problem is here, but it is not products.
It is products enter and now we should get a nice distance.
And of course, now we have it and one more time.
So we have a right of images that we pass into the product images component then.
In the product images, we structure it, and since I would want to have some kind of main image, I
set up the use state.
So I set up the state power and by default, I set my first image to be equal to that main image.
Now, the problem is going to be that initially it is undefined.
That's why we set up default primers.
So if it is undefined, I just say that it is going to be an array with one object with the Yarnold
property, because in here, of course, we're accessing the real problem.
But I have one image and then I have the gallery of images so that one image is going to be the main
image, whatever it is, initially at its first one.
And then, of course, we're turning that.
We add a little bit of sensors and then we have the gallery.
We iterate over all the images we have in there and it is an object.
And then each object has the URL property but points to the image.
That's why we can display them.
And since I would want to add something for alterative, I have the filename and also I need the index.
And then once I click on the image, I use my set mind function and I just pass in the image by accessing
the array and then passing whatever is the index of that image.
So now once I click on it, it becomes that main image.
And then lastly, since I would want to showcase, well, which image I'm actually displaying, I just
add a nice boat around.
And I do that by conditionally checking if the image URL matches to the want of Manero that I know that
that's the image.
And then we just have this class of active.
If not, we have class of No.