React Ecommerce Website #20: Dynamic Images Functionality in One Click 🔥

Hello what's up guys My name is Vinod Bahadur Thforder And I would like to tell you that today is a very awesome day Because today we are going to see My images section on our React e-commerce website Yes guys so in yesterday's video You can see that we have seen so much We think it is very awesome Today we will see in this video This particular section where you can see all these images How can we achieve that With the help of React Again don't say HTML CSS We are doing this through Reac Alright so let's go And you can see In yesterday's video I have created a component called my image And in that as a prop I have passed the image And in this image if you see this is an object basically an array of an object in which these four images are already there so I have to play with these four images and this functionality Which we get in Amazon We have to achieve it now Before that I would like to tell you I have added the complete playlist Source code is free You will get the link in the descriptio In the comment section If you haven't subscribed yet please subscribe We are very close to 5 lakh subscribers Only 4000 are left If it could be done as soon as possible we would have done it today And please subscribe It's going to be a lot of fun Alright so let's go here I have passed it We have to copy it We are destructuring it directly Perfect my work is done Now I will do one thing My style component code I will copy it Because the game Where you can see it That is obviously CSS And in our case it is a style component So guys now simply I will go to the return portion Here we have a wrapper As always This is it now this wrapper will not work We are going to get the style component So let's import it first I will go to the style component Perfect Let's go to this place So guys what's happening here Simple one column Two columns total two columns And in my first column there are four rows So basically Two divs two columns And four rows in the first column So how simple it was So guys what we have to do here In our first column there are four rows And our image Basically whatever URL we get In this there are only four images I have kept it guys only four So see how In the first column I need four rows So I go to the grid And I write here grid four column Now you may feel a little bit of grid four column But basically It will be converted into a row don't worry So this is it Now here my image What is it It's an array right So I do one thing I don't think you feel it So this is my image CTRL-SHIFT-ALT I go here Now it will be fun When I click on it So I won't get anything here I am removing it like this And see my image Watch carefully Total four One two three and four I am getting four images like this So this is an array Now I am going to run it in a loop Now you will know mage map We have a callback function This is it And obviously we all know In this there will be a current element Then we have an index number Let's write index Now watch carefully I am getting four data One by one So return What do I do inside it I have always said that after html5 Semantic layout So we need to go with the Figure tag It will be very easy to work with it Then we have an image Now my source is very important Because my current element Dot My current element means I have got all the data What do I need in it I need my url And my id is also here And I have Its file name So I am here CurrentElement url It is very important to keep alt always So currently I am going to keep the file name here Now you know what the file name is And we have a class name So class name I keep it here I have kept box image style And it says: Whenever you use the map method you need to pass the key So I will pass my index here You can see: Here we have id So I can pass id here But it's okay There is no problem because there are four data So I left it as it is Now if I go here And see I have got all four images I need Now I need this main image It is very simple I am moving I am writing the second column Like this The second column It is very simple I am taking a class Like this I am moving here Now I need an image I am writing here My image is url And it is first My first image Sorry it was an array So I need to write like this Ok In this section My image image The first array The name of the file This is it If I move here I think it is giving us a warning Let's see what warning we are getting Now you can see Cannot read properties undefined reading map Ok But now we are getting a warning Now we are getting undefined This particular section We are getting undefined Let's see What is the problem Undefined reading map I want to tell you one thing When is undefined Undefined is when you don't define anything We have already seen The difference between undefined and null I want to tell you one thing See This particular section The moment went with url We are in trouble Here you have to write equal to And I am moving here Again this image is an array This image is an array By defaul We can set its default value I am keeping an empty array And inside it We have multiple objects Array of an object Inside it I am keeping an empty url Now I am going to refresh Let's see what happens Boom I am getting a complete data We have to write a line code Where undefined I have defined it by default It will be equal to this If nothing is happening It will be equal to this I am moving it See how easy it is But the problem is I am not able to click on it If I click on it It will come here If I click on it it will come here What I am doing here All my images Suppose If I click on 1 All my images This image is here If I click on 2 This image is here Now what I want If I click on it It will be added here You are changing the state Now it comes your state management We are using use reducer hook But this is a kid's wor Why should we bother using a reducer We will use the state hook Our main image Whenever we click on it State management I mean functional component We will make it current data I mean I will tell you Let's go to the top We don't need the console I am writing the main image Set main image Will be equal to use state hook This is it Undefined will tell you I am defining it First of all I am copying this sectio I am pasting it I am passing The mill was slightly damaged You can no longer coach in this I used React in this Okay Alright perfect Now he just somehow You know that here is the boundary But this is what you can see Where did Alright go In the image if I see anything I will change it Set the current for the image Updated data will be called and that It will not accept current data Let's try once then If the subpoena is here Click to come we have this one The event calls it here that's correct come on click Okay let's go with Fed Aero Function here Set image and whenever someone does it on this Click on this to get my Current Element dot URL is You must have thought that way But how easy it was No need to do anything And just a single line of code appears with a click And our work is done Just one thing remains now how Not vertical in the center If we go ahead with this This is the particular section I am going inside Watch how Gauss is this way This is our first portion Here if I were to say " tie" this I will assign the item to the alliance center So much is not becoming clear Display Flash Particle see Gas displayed and viewed Alien Item Center It has arrived at the particle center What will happen where I have already gone online but in these realities What will happen there let's see Product image Product Image The thing to note about gas is tha He is not in our file And I wonder if this is ours Product Image Apologizes but we have made some mistakes No no not now it's gone away Then see how much gas there is My work is done now I can do whatever I want I will enter the data here this always centers me vertically It is coming and here it is That's all for this video You will really like the video And you will have so many pages ahead of you How it is happening Clicking on Nizo was so simple How did you like the video How did you like the video