1 00:00:00,490 --> 00:00:10,460 So, no, let's add some functionality to the menu page, so we'll pass the props basically, and this 2 00:00:10,500 --> 00:00:15,570 all the data, which is static here, will try to make it dynamic and we'll try to load it from the 3 00:00:15,570 --> 00:00:16,530 data logs. 4 00:00:18,800 --> 00:00:19,940 That's what we're going to do. 5 00:00:20,560 --> 00:00:25,040 Well, first of all, let us pass some props here, so I'll pass object. 6 00:00:26,750 --> 00:00:35,960 I'll pass an object here and that will be items and inside, and we'll nab this item inside. 7 00:00:36,530 --> 00:00:38,030 So after? 8 00:00:40,160 --> 00:00:47,480 After this election, we'll map it for mapping is a diverse group functions, we will lead to clear 9 00:00:47,480 --> 00:00:57,320 places and head like item, the dart map and inside this, that will be the menu item. 10 00:01:00,580 --> 00:01:03,730 And this will like this is a function, basically. 11 00:01:04,480 --> 00:01:04,990 So. 12 00:01:06,110 --> 00:01:11,210 And there will be a constant object that will help it. 13 00:01:13,240 --> 00:01:15,790 Title image. 14 00:01:17,170 --> 00:01:23,170 And description that will be DSC and will have the price. 15 00:01:24,240 --> 00:01:25,530 That will be equal to. 16 00:01:26,630 --> 00:01:27,260 Menu. 17 00:01:29,040 --> 00:01:29,610 Item. 18 00:01:31,500 --> 00:01:32,370 Sounds fair enough. 19 00:01:33,210 --> 00:01:34,680 Next, we'll return. 20 00:01:36,370 --> 00:01:37,750 We'll return something else. 21 00:01:38,860 --> 00:01:40,510 So here we'll return 22 00:01:43,870 --> 00:01:45,970 in the pattern, this is what we'll return. 23 00:01:47,770 --> 00:01:51,040 Every single thing from this. 24 00:01:52,260 --> 00:01:56,220 Article two, basically like. 25 00:01:57,430 --> 00:02:01,720 The entire day of everything will be copied and. 26 00:02:05,460 --> 00:02:13,950 Well, basically tell this to OK, that will be a bill that will cut and paste inside this bill. 27 00:02:15,440 --> 00:02:17,510 Once you pasted it inside, so. 28 00:02:18,940 --> 00:02:20,470 Inside that is the article. 29 00:02:20,890 --> 00:02:22,830 Image tag harder. 30 00:02:23,830 --> 00:02:24,460 It's for. 31 00:02:26,500 --> 00:02:33,760 The attack, when there's an article, then you have this closing thing and then you have the three 32 00:02:34,090 --> 00:02:35,800 racist lie that is only two. 33 00:02:41,040 --> 00:02:45,870 So this map, this is an argument to the function, basically. 34 00:02:46,410 --> 00:02:57,150 So this sorry, this one placard will be closing here between this and now, I think we got to go. 35 00:02:57,450 --> 00:02:57,720 Yeah. 36 00:02:58,180 --> 00:03:01,620 Now there's no roads and that is also done. 37 00:03:02,760 --> 00:03:04,560 So this was, I guess, you know. 38 00:03:07,710 --> 00:03:08,460 This was the thing. 39 00:03:08,940 --> 00:03:10,290 Let me just save it. 40 00:03:11,400 --> 00:03:11,760 Yeah. 41 00:03:12,510 --> 00:03:16,770 Now what we'll do is we'll change this all all these detecting to the dynamic. 42 00:03:17,520 --> 00:03:21,150 OK, so the 30 for it? 43 00:03:22,970 --> 00:03:30,410 First of all, the comes of the image or the article, basically, because the card before that will 44 00:03:30,620 --> 00:03:31,220 provide. 45 00:03:32,940 --> 00:03:40,710 The key and that key will be the I.D. And next, we'll be having the glass name. 46 00:03:42,110 --> 00:03:48,290 Class name will be on the menu item menu, not Upwork, is the lowercase. 47 00:03:49,010 --> 00:03:59,470 Menu item, and inside this email, there will be the sauce that will also be our dynamiting on the 48 00:03:59,480 --> 00:04:06,950 sauce will be image and it will be the title of the image. 49 00:04:09,750 --> 00:04:19,650 Or not not, and so the pattern, then is that that will be the title character and class name will 50 00:04:19,650 --> 00:04:21,990 be put to the test wolf. 51 00:04:22,140 --> 00:04:27,300 Let me just save it and see if things are working or not. 52 00:04:28,300 --> 00:04:31,870 So there are some still some errors because. 53 00:04:34,190 --> 00:04:37,790 Because we have not yet world with gorgeous files, so no problem with that. 54 00:04:38,290 --> 00:04:40,790 I we'll work around it before first. 55 00:04:42,680 --> 00:04:43,940 Let us finish off with this. 56 00:04:45,300 --> 00:04:54,450 Who in the day started, what will do is that we'll just right the dynamic, you know, vital to that 57 00:04:54,450 --> 00:05:01,140 will be title and inside this forward for the money, basically. 58 00:05:01,620 --> 00:05:04,100 That would be the case. 59 00:05:04,110 --> 00:05:12,330 I will be concerned, but here there will be a prize pool that will be price and the amount we have 60 00:05:12,330 --> 00:05:15,450 given in like dollars. 61 00:05:15,760 --> 00:05:23,940 So that will be just multiplied to make it look like this and also will give them that dark cloud function 62 00:05:23,950 --> 00:05:26,970 so that we don't have the decimal values, OK? 63 00:05:28,090 --> 00:05:38,530 So that would be Mad Mad Dog Lord, and we'll fight this value for this value will be converted to integer 64 00:05:38,530 --> 00:05:38,860 value. 65 00:05:38,860 --> 00:05:45,010 If if that if that is something like after the raid similar to that would be just rounded off and this 66 00:05:45,010 --> 00:05:46,840 will be converted to the floor value. 67 00:05:47,410 --> 00:05:51,390 OK, so this is a JavaScript function, basically metaphor. 68 00:05:51,850 --> 00:05:53,500 This has nothing to do with React, OK? 69 00:05:54,160 --> 00:06:03,580 And how do we give a class name to the age group and that the class name would be price class name and 70 00:06:03,580 --> 00:06:05,230 that would be price? 71 00:06:06,850 --> 00:06:14,950 And let me just save it, and of course it will not, but because we have not worked with the abductees. 72 00:06:15,430 --> 00:06:19,360 But still, we can just configure this as much as possible. 73 00:06:19,990 --> 00:06:26,200 Go inside this paragraph tag that it was their description which we wrote like statically. 74 00:06:26,800 --> 00:06:29,560 But now it will be the dynamic thing. 75 00:06:29,560 --> 00:06:36,590 So description and inside the glass name that is item text. 76 00:06:36,590 --> 00:06:38,260 So that's good. 77 00:06:39,860 --> 00:06:47,000 We see it and see things and things aren't what they should be. 78 00:06:48,490 --> 00:06:48,880 And. 79 00:06:50,550 --> 00:06:56,640 The Minotaur just looks perfect, like whatever we expected that that is there, and now we will move 80 00:06:56,640 --> 00:07:04,140 on to the final and think that as a configuring the ABD or this according to every component and rendering 81 00:07:04,140 --> 00:07:11,070 it and making use of the map function and then calling the component and passing the values to the props 82 00:07:11,400 --> 00:07:16,410 up until the proper paths inside the inside that particular component. 83 00:07:16,710 --> 00:07:23,310 So what we'll do is we'll just we'll just call that component here and we'll pass the value to the. 84 00:07:23,610 --> 00:07:25,620 So that is what we're going to do next. 85 00:07:26,620 --> 00:07:27,100 Who? 86 00:07:29,540 --> 00:07:30,140 That will. 87 00:07:31,690 --> 00:07:36,850 Let let me just begin it and the rest we will see in the next few days or so, first of all, let me 88 00:07:36,850 --> 00:07:42,910 just like begin to, first of all, will import all of that too many we have already imported. 89 00:07:43,350 --> 00:07:52,540 So now we have to import data from the data rods, so import items from. 90 00:07:53,950 --> 00:08:00,250 Less data is also you can write, you can leave the data as data also, there's no problem with that, 91 00:08:00,250 --> 00:08:00,550 OK? 92 00:08:01,150 --> 00:08:05,920 And then we'll write, we'll write a constant. 93 00:08:07,030 --> 00:08:13,540 And they're constantly concerned, and that will be all categories now. 94 00:08:14,350 --> 00:08:19,270 What we are doing here is that we are calling all the categories. 95 00:08:19,300 --> 00:08:26,800 And whenever the user clicks on one of them, then the particular related to that category will be shown. 96 00:08:27,430 --> 00:08:36,540 So right now, that would the it might seem a little weird, but things will make sense once we just 97 00:08:36,580 --> 00:08:38,800 go into it deeply. 98 00:08:39,280 --> 00:08:40,810 And so here there will be. 99 00:08:41,880 --> 00:08:43,500 String that will say all. 100 00:08:45,520 --> 00:08:49,210 And that will be a valid operator, which will say new. 101 00:08:49,930 --> 00:08:52,450 And that will be the that. 102 00:08:53,690 --> 00:08:55,930 Inside this room will ride the. 103 00:08:58,640 --> 00:09:09,380 Items and dart map and will map for the item like whatever the plural value here. 104 00:09:09,570 --> 00:09:15,320 So here it will be the singular one and its items it will with the item. 105 00:09:15,350 --> 00:09:18,170 OK, so now here. 106 00:09:19,160 --> 00:09:26,090 There will be in line factor federal function and we should be returning Item Dot. 107 00:09:27,260 --> 00:09:28,090 But that the. 108 00:09:29,290 --> 00:09:31,930 Oh, we can just see if it. 109 00:09:33,360 --> 00:09:36,990 And of course, things are not complete right now. 110 00:09:37,540 --> 00:09:45,120 We'll do things now, what we'll do is we'll move further and will calm her down after this ad and we'll 111 00:09:45,870 --> 00:09:46,230 write. 112 00:09:46,230 --> 00:09:54,690 Some like this will write you like you state folks, and I will provide some values and we'll pass some 113 00:09:54,690 --> 00:09:55,170 values. 114 00:09:55,730 --> 00:10:03,450 But all of that will be done now and that will do in the next two, probably or will. 115 00:10:03,540 --> 00:10:07,560 I will write the EU's trade talks, will map some function and we'll pass props to. 116 00:10:07,560 --> 00:10:14,850 This is two components that will be the basic rendering and that will the final rendering of the project. 117 00:10:15,300 --> 00:10:17,310 So you see in the next video.