1 00:00:00,180 --> 00:00:06,960 And once we have access to the cocktails, all right, we can just remove the council log online where 2 00:00:06,960 --> 00:00:13,950 we have the return, we're going to go with section and a class name by the name of S.. 3 00:00:14,290 --> 00:00:21,900 Then also, I would want to have a hearing interview with a class name of section title, section hyphen 4 00:00:21,900 --> 00:00:23,430 title inside of it. 5 00:00:23,430 --> 00:00:28,410 Let's tie cocktails and line right next to it. 6 00:00:28,590 --> 00:00:30,470 There's going to be a cocktail center. 7 00:00:30,870 --> 00:00:37,860 So this is where I would want to iterate over my work and for every item I would want to return a cocktail 8 00:00:37,860 --> 00:00:38,420 component. 9 00:00:38,790 --> 00:00:39,780 So we go here. 10 00:00:40,710 --> 00:00:46,140 With the first, a class name of Cocktail's Santore. 11 00:00:47,280 --> 00:00:56,640 Cocktails online center and then inside of this there, I said, let's iterate over our area, which 12 00:00:56,640 --> 00:00:58,530 will use a map method. 13 00:00:58,920 --> 00:01:02,200 And then again, I'm just going to be lazy and call this item. 14 00:01:02,550 --> 00:01:07,990 Now, the good news is that in the item I have the area and I go with a return online. 15 00:01:08,040 --> 00:01:11,190 I'm looking for my cocktail component. 16 00:01:11,530 --> 00:01:15,990 Then I would want to set up the key and I'm looking for item that ID. 17 00:01:16,230 --> 00:01:18,650 And then also I'd want to spread out all the properties. 18 00:01:19,020 --> 00:01:26,100 So I'm going to say object per operator that the dot and then item and the last thing that we need is 19 00:01:26,100 --> 00:01:28,540 to handle that in the cocktail component. 20 00:01:29,040 --> 00:01:32,010 So I'm going to navigate to that particular component. 21 00:01:32,400 --> 00:01:39,720 The properties that I'm looking for are image, name, ID info and glass, because remember, we still 22 00:01:39,720 --> 00:01:46,980 need to pass that idea into the link because of course, we'll grab that ID in the single cocktail page 23 00:01:47,220 --> 00:01:48,780 and do another fetch. 24 00:01:49,780 --> 00:01:55,450 So let's say here, image, name, I.D. info and then glass. 25 00:01:56,020 --> 00:02:02,380 These are properties that I'm looking for and as far as their turn, it is going to be an article with 26 00:02:02,380 --> 00:02:08,100 a class of cocktail class name and then cocktail. 27 00:02:08,680 --> 00:02:11,460 Then I also want to have the image container. 28 00:02:11,830 --> 00:02:20,290 So let's go with div the class name here with IMG and then hyphen container inside of this of let's 29 00:02:20,290 --> 00:02:21,280 place our image. 30 00:02:21,430 --> 00:02:25,900 So we're going to set up our source of course, which will be equal to the image. 31 00:02:26,260 --> 00:02:34,840 Alternative will be equal to the name like so and then we're going to have the Fuhrer where we're going 32 00:02:34,840 --> 00:02:43,010 to have the info, we have one there and then right next to it let's have a cocktail cocktail and then 33 00:02:43,030 --> 00:02:44,170 hyphen for her. 34 00:02:44,650 --> 00:02:47,110 And let's go with adding three. 35 00:02:48,110 --> 00:02:56,480 We're going to have name glass and info, so heading three, heading for an inside of the heading for 36 00:02:56,480 --> 00:02:57,510 we go with glass. 37 00:02:58,110 --> 00:03:00,350 Let's say it just so I can see how it looks. 38 00:03:00,520 --> 00:03:02,590 OK, that looks about right. 39 00:03:03,170 --> 00:03:06,740 And also, I want to go with paragraph, and that, of course, will be my info. 40 00:03:08,100 --> 00:03:15,100 Essential in here, we just display which glass are we using and or I'm sorry, this one was whether 41 00:03:15,320 --> 00:03:16,460 yeah, my apologies. 42 00:03:16,650 --> 00:03:19,430 This one was whether it was alcoholic or not. 43 00:03:19,760 --> 00:03:21,720 Of course, the glass one was the heading for. 44 00:03:21,980 --> 00:03:29,390 And then lastly, let's set up that link, because remember in the app where we have our REACT router, 45 00:03:29,660 --> 00:03:32,810 I have a path for Fort's cocktail. 46 00:03:32,810 --> 00:03:40,340 And unfortunately and then, of course, as I'm setting up my link, I would want to make it dynamic 47 00:03:40,670 --> 00:03:48,830 where, yes, it is going to navigate to the same component, but in every case will pass in different 48 00:03:48,830 --> 00:03:49,240 ID. 49 00:03:49,730 --> 00:03:53,570 We navigate back to the cocktail right after the paragraph. 50 00:03:53,580 --> 00:03:57,050 We're going to go with our one component and let me close the sidebar here. 51 00:03:57,380 --> 00:04:00,340 So link component then we have to. 52 00:04:00,710 --> 00:04:07,420 And of course, now the value will be dynamic and not to disrupt as dynamic we go with Curly versus 53 00:04:07,760 --> 00:04:09,410 than the template string. 54 00:04:09,710 --> 00:04:12,080 And we have the first part of your URL. 55 00:04:12,470 --> 00:04:18,680 Again, just because I said the supporting app, I have to follow the same syntax. 56 00:04:18,690 --> 00:04:24,500 So I go first and then cocktail and then one more forward slash and then now I would want to grab that 57 00:04:24,830 --> 00:04:29,450 idea, the dynamic value, and then since I would want to add a little bit of styling. 58 00:04:30,550 --> 00:04:39,640 I'm going to go between between primary and then between and then details like so and then instead of 59 00:04:39,640 --> 00:04:43,420 the link what just say details, we say it. 60 00:04:43,420 --> 00:04:47,340 And then if I check it out on a bigger screen, there it is. 61 00:04:47,740 --> 00:04:50,260 Now, of course, we have a list of cocktails. 62 00:04:50,680 --> 00:04:58,380 And every time I click on Navigate here, the single cocktail where of course I'm going to have my I.D.. 63 00:04:58,870 --> 00:05:04,810 Now, of course, we're not handling that yet in a single cocktail, but what's beautiful is that we're 64 00:05:04,810 --> 00:05:05,900 passing in that value. 65 00:05:06,280 --> 00:05:09,550 So then once we navigate here, will perform another fetch. 66 00:05:09,910 --> 00:05:13,140 And of course, in that case, the euro will be a little bit different. 67 00:05:13,690 --> 00:05:15,280 Where will use this? 68 00:05:15,280 --> 00:05:22,570 You are the one that has the parameter of AI and we can zoom in, of course, and will pass in whatever 69 00:05:22,840 --> 00:05:25,810 we're getting back from the react router.