1
00:00:00,300 --> 00:00:04,230
OK, so now we'll add some more functionality to this abductees.

2
00:00:04,710 --> 00:00:12,810
Well, basically, we are going to create states here using must use photog and will map the data,

3
00:00:12,810 --> 00:00:18,180
we'll fetch the data and we'll pass the props to the component all of that we're going to do now.

4
00:00:18,720 --> 00:00:22,770
So first of all, we'll create some states for that.

5
00:00:22,770 --> 00:00:26,280
We need to import the EU data from the Act.

6
00:00:26,280 --> 00:00:29,460
So we'll do that here or in a coma here.

7
00:00:29,460 --> 00:00:30,300
And we'll right.

8
00:00:32,040 --> 00:00:37,020
It was a state and we imported the use state.

9
00:00:37,380 --> 00:00:42,510
And after that, we want to like initialize them.

10
00:00:43,190 --> 00:00:50,190
Well, first of all, we'll create a state here, and that will be that would be the menu items menu.

11
00:00:51,540 --> 00:00:54,330
Items and hair that will be the set.

12
00:00:56,190 --> 00:01:03,220
Menu items said the menu items, and this would be equal to the U.S.

13
00:01:03,330 --> 00:01:03,990
State.

14
00:01:05,280 --> 00:01:11,370
And her dad would be the initial the initial value will be the items.

15
00:01:13,550 --> 00:01:17,360
Because whatever the values there, so that that will be, they are not.

16
00:01:18,260 --> 00:01:19,490
So next.

17
00:01:21,250 --> 00:01:25,100
We'll create another state, and that will be for the greater good.

18
00:01:25,280 --> 00:01:32,650
So how do we write some code for the categories that will be Konst and here that will be available,

19
00:01:32,650 --> 00:01:34,600
that is known as categories.

20
00:01:35,110 --> 00:01:42,820
And there will be a function that will be the said categories and this is equal to.

21
00:01:43,940 --> 00:01:44,540
U.S.

22
00:01:47,550 --> 00:01:54,000
Stewart and value that is like the initial value, there's all categories.

23
00:01:55,180 --> 00:01:56,200
It got his.

24
00:01:57,210 --> 00:01:59,520
So this is the initial all categories, OK?

25
00:02:00,240 --> 00:02:06,840
And next, we'll filter the items according to the category, the category, which user has selected

26
00:02:07,320 --> 00:02:10,080
only those products should be listed out either.

27
00:02:10,350 --> 00:02:12,860
All else should not be listed out.

28
00:02:13,480 --> 00:02:15,210
That is what we are going to do here.

29
00:02:15,680 --> 00:02:22,220
So we'll that out, that we'll write a constraint and then we'll create a function and the function

30
00:02:22,220 --> 00:02:24,500
name will be free that items so pretty to.

31
00:02:26,360 --> 00:02:32,690
Items and that is a function, so we'll pass that category as an argument.

32
00:02:34,110 --> 00:02:43,770
That read and heard of will provide the federal function, and inside this means check like if the category

33
00:02:43,770 --> 00:02:51,390
is all we have to display all the products and if it's a specific category, then only products related

34
00:02:51,390 --> 00:02:58,080
to order like issues is related to that particular category will be tested in the categories on display,

35
00:02:58,080 --> 00:03:00,190
auditing, whatever it is that in the database, OK?

36
00:03:00,930 --> 00:03:07,680
So if we tried an if statement, if the integrity.

37
00:03:09,120 --> 00:03:10,080
Not categories.

38
00:03:10,470 --> 00:03:11,070
Integrity.

39
00:03:12,500 --> 00:03:13,820
Equally critical to.

40
00:03:15,480 --> 00:03:15,930
All.

41
00:03:18,600 --> 00:03:18,990
Then.

42
00:03:20,080 --> 00:03:24,970
What we have to do, we have to start menu items to items.

43
00:03:26,020 --> 00:03:26,550
Third.

44
00:03:27,500 --> 00:03:34,250
Menu items to pass and sidewalk items, food.

45
00:03:35,380 --> 00:03:36,100
Who's?

46
00:03:38,580 --> 00:03:45,390
And it was just right, a written statement there, because the kidney function don't return is a mandatory

47
00:03:45,390 --> 00:03:45,660
thing.

48
00:03:46,260 --> 00:03:46,860
And.

49
00:03:48,590 --> 00:03:54,950
This war so far, and next, what we'll do is we'll create another concern that is for the new items

50
00:03:54,950 --> 00:04:00,020
like the all that one for that will be responsible for displaying the.

51
00:04:01,970 --> 00:04:08,210
Items related to that particular category right now, what we have done is we'll just to show all the

52
00:04:08,210 --> 00:04:10,520
items if the category is all items.

53
00:04:10,910 --> 00:04:12,030
Now what if the categories?

54
00:04:12,050 --> 00:04:12,890
Not all.

55
00:04:12,980 --> 00:04:18,140
And it is something else, only a specific category, but we have to display that item a little.

56
00:04:18,140 --> 00:04:19,970
That category is right.

57
00:04:20,190 --> 00:04:24,980
So that is what will right now contest new.

58
00:04:26,350 --> 00:04:35,650
Items is equal to items, Darth Vader and this will expect to function and inside that there will be

59
00:04:35,650 --> 00:04:38,680
an argument, so the argument would be item.

60
00:04:40,220 --> 00:04:45,680
And here that will be item guard category.

61
00:04:45,920 --> 00:04:49,420
And that should be equal, do not fall.

62
00:04:49,640 --> 00:04:52,900
We need to equal those that Doug Reed.

63
00:04:54,850 --> 00:04:56,230
This one, yeah, this one.

64
00:04:58,730 --> 00:04:59,570
And after that.

65
00:05:00,400 --> 00:05:01,120
You should be.

66
00:05:01,780 --> 00:05:08,440
It should be like setting the start menu items to the new items because initially there are.

67
00:05:10,580 --> 00:05:12,070
Machines that are items, right?

68
00:05:12,570 --> 00:05:14,810
But that would be the new items.

69
00:05:16,530 --> 00:05:19,260
Not the items still here.

70
00:05:21,130 --> 00:05:26,770
The set of menu items, and so that it would be the new items, new items.

71
00:05:29,570 --> 00:05:38,270
And now we passed the probably I know this is the most crucial part which we are going to do right now.

72
00:05:40,280 --> 00:05:40,760
For.

73
00:05:44,680 --> 00:05:47,580
This is done now inside the main function.

74
00:05:48,060 --> 00:05:55,350
We have a section that is called as a new section, which have a class name of menu section.

75
00:05:55,680 --> 00:05:56,790
Next, we have a title.

76
00:05:57,120 --> 00:05:59,580
And inside that, we have written our menu.

77
00:05:59,580 --> 00:06:05,580
Then we have an underline and after the underline, will will close this.

78
00:06:05,660 --> 00:06:16,920
So if and like, we need to provide another day for the title that title.

79
00:06:17,070 --> 00:06:19,980
This is closed here, after all the menu.

80
00:06:21,070 --> 00:06:25,380
And underline should be inside this debate.

81
00:06:26,430 --> 00:06:29,850
That is where it was coming so far because it was an inside the state.

82
00:06:30,270 --> 00:06:34,950
But this underlined should be inside this state like right below the menu, OK?

83
00:06:35,770 --> 00:06:39,990
And now comes the turn of the category and the menu items.

84
00:06:40,290 --> 00:06:46,560
And now is the time when we will pass the value to the props, which we have.

85
00:06:46,570 --> 00:06:50,910
Like one insert like in the menu, you see, these are the props.

86
00:06:51,390 --> 00:06:56,760
But is it that if the menu here is the prop, that is the item?

87
00:06:58,910 --> 00:07:03,710
And inside the category, we have to put all of the categories in the food items.

88
00:07:04,160 --> 00:07:10,040
All of the all of those and lagging the board, both of them that will be doing right now.

89
00:07:10,070 --> 00:07:17,600
OK, so before that, first of all, will grab the category eating or the categories by have written

90
00:07:17,600 --> 00:07:20,510
category here and not categories.

91
00:07:21,080 --> 00:07:22,130
OK, it doesn't matter.

92
00:07:23,280 --> 00:07:23,840
Doesn't matter.

93
00:07:25,160 --> 00:07:30,110
Maybe you can just write categories, but the component name is categories so that we can just go with

94
00:07:30,110 --> 00:07:30,410
that.

95
00:07:30,650 --> 00:07:33,290
There's no problem that there's just a naming convention.

96
00:07:33,770 --> 00:07:37,280
OK, so now we'll provide the value to this category, as you'll see.

97
00:07:38,790 --> 00:07:39,480
This categories.

98
00:07:41,010 --> 00:07:47,940
We passed a we have already passed this lake inside the lake prop, but we have to give the value to

99
00:07:47,940 --> 00:07:49,380
it now right here.

100
00:07:50,350 --> 00:07:55,660
Categories will be having the value categories will be equal to categories.

101
00:07:59,440 --> 00:08:04,030
So this is a different category, and that is different, almost like spelling in a word, everything

102
00:08:04,030 --> 00:08:04,460
the same.

103
00:08:05,050 --> 00:08:06,100
Don't get confused.

104
00:08:06,580 --> 00:08:13,390
Next will be having to filter items or filter items.

105
00:08:13,780 --> 00:08:20,800
This filter items and this will be having the rally of the third items.

106
00:08:21,460 --> 00:08:23,380
And this is it.

107
00:08:23,440 --> 00:08:29,410
Let me save it and let me see in the browser if it's showing.

108
00:08:29,440 --> 00:08:31,690
Let me just refresh this.

109
00:08:32,930 --> 00:08:35,780
And, OK, they're showing that.

110
00:08:36,530 --> 00:08:40,640
OK, so let me just commend this menu as of now.

111
00:08:42,240 --> 00:08:42,960
For more on that.

112
00:08:45,410 --> 00:08:47,420
And come here, you can see.

113
00:08:48,650 --> 00:08:55,160
Our categories are visible and they are all clickable and CSAs, which we applied is also working for

114
00:08:55,160 --> 00:08:55,310
it.

115
00:08:55,790 --> 00:09:01,270
So that is the best part and that what we did is is not working, OK?

116
00:09:03,710 --> 00:09:08,930
Now we'll try to come in this and inside this, there will be.

117
00:09:10,160 --> 00:09:16,760
The value to the product now in the menu would probably have passed, that is the item for this item

118
00:09:16,760 --> 00:09:20,540
will be holding the value, whatever we pass inside this put up, OK?

119
00:09:21,200 --> 00:09:30,050
So inside the menu will pass the value to the items pro who will pass it to the items.

120
00:09:31,700 --> 00:09:41,810
That is equal to the menu items, I guess now is the final thing it should work.

121
00:09:42,560 --> 00:09:44,660
And let us go to the browser and see.

122
00:09:45,730 --> 00:09:54,010
OK, now I'm in the browser and this is right now, and it was not at all when we go to the oil, we

123
00:09:54,010 --> 00:10:03,430
see all of the issues along with the pictures and the title and description and all of that stuff.

124
00:10:03,970 --> 00:10:06,610
Then we go to the breakfast, we see the breakfast.

125
00:10:07,120 --> 00:10:08,380
Then we go to lunch.

126
00:10:08,500 --> 00:10:09,490
We see the lunch.

127
00:10:10,030 --> 00:10:11,410
Then we go to the shakes.

128
00:10:12,100 --> 00:10:18,970
We see the images and title and the description and the price of the shakes available in that cafe.

129
00:10:19,570 --> 00:10:28,270
So all of this is done using this all whatever we have been doing so far.

130
00:10:28,930 --> 00:10:29,470
So.

131
00:10:31,320 --> 00:10:38,070
OK, so now we are done with the look almost done with the application they're designing in converting

132
00:10:38,070 --> 00:10:43,060
part is not done and the functionality is also like gold.

133
00:10:43,890 --> 00:10:51,690
The know what I'm thinking is that we should holstered all land on a service, so I think we will go

134
00:10:51,690 --> 00:10:55,580
with it is as of now, so OK.

135
00:10:55,590 --> 00:10:58,530
So in the next review, what we'll do is we'll host this application.

136
00:10:58,530 --> 00:11:01,800
Live on fire is and I teach you how to use fire based also.

137
00:11:02,370 --> 00:11:06,360
So that's a really, really important thing like whatever work you are doing.

138
00:11:07,540 --> 00:11:10,390
Whatever website you're creating, it's really important to host it.

139
00:11:10,780 --> 00:11:15,790
And once you also do can give the you order to your friends, family and or even your employer.

140
00:11:16,090 --> 00:11:20,560
And you can just talk, you can just create a good impression.

141
00:11:21,100 --> 00:11:27,010
And you can even like, start your own business and just host it online.

142
00:11:27,340 --> 00:11:28,540
That will be doing in the next one.

143
00:11:28,540 --> 00:11:34,300
You will be hosting an application live on Firebase and Firebase.

144
00:11:34,300 --> 00:11:37,600
If you don't know what is Firebase that I'll tell in the next review.