1 00:00:00,300 --> 00:00:06,270 Without reloading component in place I'm going to close all the times that I have currently open mike. 2 00:00:06,320 --> 00:00:11,090 So and in this video we're going to work on product list. 3 00:00:11,250 --> 00:00:13,260 So we're going to render our whole list. 4 00:00:13,260 --> 00:00:15,660 And also we're gonna set up a single product. 5 00:00:15,660 --> 00:00:17,950 So first of all let me open up the product list. 6 00:00:17,950 --> 00:00:21,540 That of course is the list that we're rendering within the product page. 7 00:00:21,810 --> 00:00:27,150 And then also we're gonna need a product because what's gonna happen is that within the products list 8 00:00:27,510 --> 00:00:31,830 we're gonna loop over or map over our array of products. 9 00:00:31,830 --> 00:00:32,490 All right. 10 00:00:32,490 --> 00:00:37,500 And then once we do that we're gonna render for each and every product our product component. 11 00:00:37,500 --> 00:00:43,800 You know though before we start working on a product list within the product pages I don't think I would 12 00:00:43,800 --> 00:00:46,990 want to render the product and delete it. 13 00:00:47,310 --> 00:00:50,800 So that way might console is not overpopulated. 14 00:00:50,820 --> 00:00:55,930 So let me close the product page and then let's start working in the product list. 15 00:00:56,280 --> 00:01:02,190 And first I would want to import a product which again is just gonna be a one from and then of course 16 00:01:02,190 --> 00:01:06,000 since it is sitting within the same folder we just grab our product. 17 00:01:06,130 --> 00:01:11,240 Now also let me close the sidebar so have more real estate and I have my product list function. 18 00:01:11,750 --> 00:01:15,420 And like we covered in the previous video we're going to have two props. 19 00:01:15,510 --> 00:01:20,970 We're going to have a title prop so whatever the heading to is going to be for our section and then 20 00:01:20,970 --> 00:01:23,750 the second one is whatever data we're gonna be passing. 21 00:01:24,140 --> 00:01:28,330 And again in this case we're passing in all the products in the feature product. 22 00:01:28,440 --> 00:01:34,050 We're just gonna passing the product that have the featured properties set true. 23 00:01:34,080 --> 00:01:37,900 And then of course we're not going to just return having one. 24 00:01:37,970 --> 00:01:45,170 There is gonna be a section and then within a section we're gonna have a hearing to too. 25 00:01:45,180 --> 00:01:48,160 And this is gonna be a class name of title. 26 00:01:48,270 --> 00:01:56,470 So let's add a class name gonna set it equal to section title and then we're going to access our title. 27 00:01:56,780 --> 00:02:01,070 What's the reason why we're passing in the prop because for every time we're going to render the product 28 00:02:01,070 --> 00:02:06,590 list we would want to set some kind of title and also let's add a class name for the whole section as 29 00:02:06,590 --> 00:02:07,350 well. 30 00:02:07,410 --> 00:02:09,480 And the last name is somewhat simple. 31 00:02:09,560 --> 00:02:14,920 We'll just have a section then right after the heading we're gonna have our div. 32 00:02:14,930 --> 00:02:21,060 We're gonna have a div with a class name of products center and then within this div. 33 00:02:21,090 --> 00:02:27,260 Like I said we're going to map over the product prompt as we're getting back which essentially is always 34 00:02:27,260 --> 00:02:30,800 gonna be an array and I'm gonna say product map. 35 00:02:30,800 --> 00:02:35,960 So let's map over the array and then we'll get a callback function callback function is applied for 36 00:02:35,960 --> 00:02:43,190 each and every item in the array and an parameter in a callback function we can assign some kind of 37 00:02:43,610 --> 00:02:49,730 value to each and every item and in my case I'm just gonna name my parameter item but just please keep 38 00:02:49,730 --> 00:02:52,700 in mind you can name this orange it doesn't really matter. 39 00:02:52,700 --> 00:02:58,970 So I'm gonna say item then within my callback function for each and every item I would want to return 40 00:02:59,300 --> 00:03:07,370 a product component product component and then I need to set up to props I need to have a key prop since 41 00:03:07,430 --> 00:03:13,550 when we're dealing with lists in react we need to have this problem and this needs to be a unique value. 42 00:03:13,550 --> 00:03:19,430 And each and every item does have the I.D. property and by the way we can always check that if we check 43 00:03:19,640 --> 00:03:25,790 whatever data we're getting back this is gonna be essentially each and every product and product is 44 00:03:25,790 --> 00:03:27,240 going to have the idea. 45 00:03:27,250 --> 00:03:32,120 All right then let's head over backward passing and hardy and then we have multiple ways how we can 46 00:03:32,120 --> 00:03:38,210 pass it and you can access property by property because the properties we're looking for is going to 47 00:03:38,210 --> 00:03:42,610 be again the I.D. the title the price as well as the image. 48 00:03:42,680 --> 00:03:48,140 Now image is going to be a bit nested but regardless it's going to work the same way or my preferred 49 00:03:48,140 --> 00:03:55,400 method is just using the spread operator for the object so we can say dot dot dot and then item. 50 00:03:55,400 --> 00:04:02,180 So in this case I'm passing in all the properties that I have within that particular item into my product 51 00:04:02,180 --> 00:04:02,990 component. 52 00:04:03,140 --> 00:04:05,500 I just find it a bit easier to manage. 53 00:04:05,540 --> 00:04:10,670 So let's close it out and then if everything is correct we're gonna have a product and then we're just 54 00:04:10,670 --> 00:04:16,160 gonna have a bunch of hellos and when I say bunch of course I mean 7 where for each and every product 55 00:04:16,520 --> 00:04:22,820 currently since we haven't started working with whatever props we're passing in from our item that's 56 00:04:22,820 --> 00:04:24,830 the reason why we have a hello product. 57 00:04:24,980 --> 00:04:26,070 But let's change that. 58 00:04:26,240 --> 00:04:29,840 We're gonna head over to a product and let's start working on it. 59 00:04:29,960 --> 00:04:34,370 First of all we need to decide well what kind of properties are we going to be looking for. 60 00:04:34,370 --> 00:04:40,160 So we need to decide what kind of properties we're looking for from our product object and if we head 61 00:04:40,160 --> 00:04:47,030 over to a finished product I can see that I'm going to need a image I'm gonna need a title I'm gonna 62 00:04:47,060 --> 00:04:54,980 need also a price but in order to display a single product in order to navigate to that page and get 63 00:04:54,980 --> 00:04:59,100 that particular information I also gonna need an I.D.. 64 00:04:59,540 --> 00:05:01,100 So those are the four things we need. 65 00:05:01,130 --> 00:05:03,540 We need image title I.D. and price. 66 00:05:03,740 --> 00:05:06,960 And again whenever we set up with dot dot dot. 67 00:05:06,980 --> 00:05:10,640 So the objects per operator we have access to all the properties. 68 00:05:10,670 --> 00:05:16,340 So essentially what you're getting within your props is anything that is within that object you want 69 00:05:16,340 --> 00:05:21,950 the idea just get the I.D. property you want a title get a title and hopefully you get the gist. 70 00:05:21,950 --> 00:05:26,690 So I'm gonna head over back to the product and then I'm going to say that I would like to access a few 71 00:05:26,690 --> 00:05:28,970 properties and I'm gonna go with image. 72 00:05:29,030 --> 00:05:32,960 Our image is going to be a little bit difficult because it is nested. 73 00:05:32,960 --> 00:05:37,760 So first of all I'm gonna get the image but we're gonna do a little bit more than I'm going to say title 74 00:05:38,030 --> 00:05:42,770 then I'm gonna say the I.D. and then I'm gonna say price and I know I already said this but the reason 75 00:05:42,770 --> 00:05:48,700 why we can right away access all these values is because we were using this object spurt operator where 76 00:05:48,710 --> 00:05:53,750 I'm just saying you know whatever properties this object has passed it in as props. 77 00:05:53,750 --> 00:05:56,860 And that's the reason why we can right away access them here as well. 78 00:05:57,040 --> 00:06:00,140 And let me assign right now my image to where you are. 79 00:06:00,320 --> 00:06:06,290 Because if again we're gonna check our project our finished project and the data we're getting back 80 00:06:06,710 --> 00:06:11,630 we can see that we have the image property but we're not accessing right away the image in fact the 81 00:06:11,630 --> 00:06:17,450 image is sitting within the image and then you are well and if you're wondering why this structured 82 00:06:17,660 --> 00:06:18,710 is set up this way. 83 00:06:18,830 --> 00:06:23,270 The simple answer is strappy that's how strappy sets up the data. 84 00:06:23,330 --> 00:06:28,610 So in this case it's not me who came up with the structure in fact it is trapped but since I don't want 85 00:06:28,610 --> 00:06:32,950 you to refactor the application once you set up to your own back and that's the reason why we're going 86 00:06:32,950 --> 00:06:36,140 to use the same structure as strappy does. 87 00:06:36,140 --> 00:06:39,340 So we're looking for image and then the property name is euro. 88 00:06:39,420 --> 00:06:42,980 And this is where we're gonna get our image and by the way it can just open up and you're going to see 89 00:06:42,980 --> 00:06:49,230 that of course this is the image which by the way is provided by Claude Marie the accountant we're going 90 00:06:49,230 --> 00:06:54,530 to set up a little bit later so what I'm gonna do is I'm gonna say let and you're not I can use also 91 00:06:54,540 --> 00:07:01,720 concept concept you are L is equal to an image since it is an object I'm just gonna access the URL and 92 00:07:01,760 --> 00:07:03,770 now let's set up our whole product. 93 00:07:03,770 --> 00:07:11,420 So instead of the heading One we're gonna have an article to go and then the classes for the article 94 00:07:11,450 --> 00:07:13,080 are gonna be product. 95 00:07:13,400 --> 00:07:19,660 So we're gonna go with product and then within the product first I would want to show the image. 96 00:07:19,670 --> 00:07:22,970 So let me head over back to home page and then show you. 97 00:07:23,000 --> 00:07:28,760 So we're first going to have the image but then within the image container we're also gonna have our 98 00:07:28,760 --> 00:07:29,490 link. 99 00:07:29,660 --> 00:07:37,370 So right before we start working on the rest of our Jess ex let's also import a link from reactor order 100 00:07:37,370 --> 00:07:40,350 down because we would want to navigate that specific page. 101 00:07:40,490 --> 00:07:45,410 So let's say react around or down and then we're gonna have our image container. 102 00:07:45,410 --> 00:07:52,290 So I am G Dana and then within this image container we're going to have first of all the image. 103 00:07:52,380 --> 00:07:58,120 Now the source is gonna be the URL so you can access image that you are all that is gonna be our source. 104 00:07:58,230 --> 00:08:02,010 And then let's also write a way for alternative set up title. 105 00:08:02,280 --> 00:08:07,950 Let's say that a name is going to be the title of our image and then within the image container we're 106 00:08:07,950 --> 00:08:09,600 also gonna set up our link. 107 00:08:09,690 --> 00:08:11,410 So we're gonna have a link. 108 00:08:11,640 --> 00:08:15,660 And now we need to set up this dynamically because previously when we did we said OK. 109 00:08:15,690 --> 00:08:19,240 So navigate to let's say product or navigate home. 110 00:08:19,350 --> 00:08:24,120 However in this case each and every link is gonna be unique because each and every time I'm going to 111 00:08:24,120 --> 00:08:31,470 open up the link within my product it's going to navigate to a single product page but with different 112 00:08:31,470 --> 00:08:34,590 ideas and that way of course we're gonna show that info. 113 00:08:34,590 --> 00:08:38,780 So in order to set that one up we're gonna have to have the curly versus first. 114 00:08:38,920 --> 00:08:43,610 Then we're going to use the template strings and we're going to say the URL is gonna be products. 115 00:08:43,680 --> 00:08:49,810 In this case as you see you had a proper list and then we want to access that particular idea. 116 00:08:49,950 --> 00:08:56,290 So I'm going to say here get me I.D. of that product and let me just quickly double check whether within 117 00:08:56,290 --> 00:08:58,680 the product details we're still active thing I do. 118 00:08:58,710 --> 00:08:59,280 Yes we are. 119 00:08:59,280 --> 00:09:05,220 So that where you're gonna be able to see that we are correctly accessing each and every unique product. 120 00:09:05,220 --> 00:09:07,810 So let me set up product forward slash I.D.. 121 00:09:08,130 --> 00:09:13,020 So now in this case each and every time we're going to navigate to a unique page because our ideas are 122 00:09:13,020 --> 00:09:16,880 gonna change for each and every product and also let's add some class names. 123 00:09:17,070 --> 00:09:25,880 So let's say a class name BD n BD and primary and we're gonna have a product link like so. 124 00:09:26,100 --> 00:09:33,090 Let me close out my link component or you know what I need to write details and details then we close 125 00:09:33,090 --> 00:09:39,060 out our link and then write right outside the div we're going to create another def so don't created 126 00:09:39,060 --> 00:09:43,920 within the image container there's gonna be two divs one for image container and the second one for 127 00:09:43,920 --> 00:09:50,220 the footer and then within footer we're just gonna display the title on price so let's go with Def the 128 00:09:50,290 --> 00:09:58,110 class name is gonna be product footer product water and then within a day we're gonna have a title. 129 00:09:58,190 --> 00:10:04,820 So paragraph with a product title and the text is gonna be our title. 130 00:10:04,820 --> 00:10:08,800 So whatever title prop we got from our product list. 131 00:10:08,810 --> 00:10:11,130 The second one is gonna be a price. 132 00:10:11,240 --> 00:10:13,820 So let's go with another paragraph. 133 00:10:13,820 --> 00:10:22,260 And then in this case the class name is product price and then the price we're gonna pass in as our 134 00:10:22,260 --> 00:10:23,480 prop again. 135 00:10:23,610 --> 00:10:29,640 So we're gonna access the variable and then the variable we're looking for his price. 136 00:10:29,640 --> 00:10:32,580 And I'm just gonna add here dollars then let's save it. 137 00:10:32,650 --> 00:10:35,850 Now we should have all these products here displayed. 138 00:10:35,960 --> 00:10:40,590 I'm gonna head over to a bigger browser window just to show that of course in the home page we're not 139 00:10:40,590 --> 00:10:46,200 displaying anything correct like because we haven't set up our feature products but if we navigate to 140 00:10:46,200 --> 00:10:49,050 a product page we're gonna see all the product. 141 00:10:49,170 --> 00:10:55,380 And if we're going to start navigating to a single product page not just now the idea is nine. 142 00:10:55,530 --> 00:11:01,230 If I'm gonna navigate back and if I'm going to check now this guy is gonna have the idea of 10 and this 143 00:11:01,230 --> 00:11:05,940 way we set up our product list we render each and every product. 144 00:11:06,090 --> 00:11:09,170 And of course we also render this single product. 145 00:11:09,240 --> 00:11:15,000 We haven't set up the functionality yet in that component but we can clearly see that we're accessing 146 00:11:15,330 --> 00:11:20,250 a unique product each and every time we navigate to a product page.