1
00:00:00,150 --> 00:00:07,350
All right, and back to work, so let's now get back to our people are looking for a grocery button.

2
00:00:07,390 --> 00:00:08,930
Let me check where I'm at.

3
00:00:09,390 --> 00:00:11,220
So let me stop the server.

4
00:00:12,000 --> 00:00:15,160
Liberty Council, City Road.

5
00:00:15,390 --> 00:00:23,650
OK, once I'm here again, I would want to go to grocery and more specifically, set up like show online,

6
00:00:23,670 --> 00:00:33,630
of course, same deal, npm install and ampm start Wattstax up to their server online.

7
00:00:33,750 --> 00:00:40,470
As far as a project in a source, you find of course the address of the alert address, which is going

8
00:00:40,470 --> 00:00:48,870
to be on alert component and list where we are going to iterate over the data and display the items.

9
00:00:49,230 --> 00:00:54,960
Now also on this project, we're going to use the reactor concern, as you can see in the list, just

10
00:00:55,060 --> 00:00:59,850
I-Report, both of them, the added one, as well as the trash one.

11
00:00:59,970 --> 00:01:04,940
And I guess and first start by navigating to jazz.

12
00:01:05,400 --> 00:01:09,450
And as always, we're just going to set up some state borders.

13
00:01:09,870 --> 00:01:11,520
First one is going to be for the form.

14
00:01:11,530 --> 00:01:14,840
So we go with name and surname.

15
00:01:15,150 --> 00:01:17,610
So this is the value that we'll use in our form.

16
00:01:18,050 --> 00:01:20,700
And by default, we're just going to have the empty row.

17
00:01:21,060 --> 00:01:27,210
Then there's going to be one for the list where eventually we will use the local storage, but not for

18
00:01:27,210 --> 00:01:27,510
now.

19
00:01:27,780 --> 00:01:29,660
So for now is just going to be an empty array.

20
00:01:29,670 --> 00:01:33,000
So we go with your state and then we pass in the empty.

21
00:01:33,000 --> 00:01:33,330
Right.

22
00:01:33,720 --> 00:01:36,660
Then we're going to have one for is Eraring.

23
00:01:37,020 --> 00:01:41,530
So there's going to be a flag in state, whether we're editing or not.

24
00:01:41,910 --> 00:01:43,090
So in this case, let's go.

25
00:01:43,090 --> 00:01:49,290
What is editing and then set is editing, of course.

26
00:01:49,560 --> 00:01:50,640
And by default.

27
00:01:50,640 --> 00:01:51,090
Yes.

28
00:01:51,090 --> 00:01:54,020
You guessed that it is going to be false.

29
00:01:54,270 --> 00:01:54,570
Yep.

30
00:01:54,810 --> 00:01:55,590
That's the case.

31
00:01:55,950 --> 00:01:56,340
All right.

32
00:01:56,700 --> 00:02:03,480
Once we have is that there's two more state wires that I would want I would want one for edit ID.

33
00:02:03,930 --> 00:02:07,000
So this is going to be very specific where we have added Eddie.

34
00:02:07,350 --> 00:02:13,650
And then the other edit idea, of course, will reflect, well, which item are we actually editing?

35
00:02:13,920 --> 00:02:18,180
So we go with edit and then and then set at it.

36
00:02:18,180 --> 00:02:24,810
And then idee is equal to a year's state and by default it is going to be on the last state value will

37
00:02:24,810 --> 00:02:30,900
be alert const alert and you can probably already guess that we're going to have some kind of function.

38
00:02:30,910 --> 00:02:32,230
So set alert as well.

39
00:02:32,700 --> 00:02:35,850
Now the difference here is going to be an object.

40
00:02:36,270 --> 00:02:41,820
So unlike previously where we just had boolean values, true or false, in this case, I would want

41
00:02:41,820 --> 00:02:49,470
to pass in the object because in this project I want to pass in more values as well, where as I add

42
00:02:49,470 --> 00:02:55,470
the item, I would want to display some text and I would want to display a different color for alert.

43
00:02:55,710 --> 00:03:03,330
But for example, once I deleted, then I have again different values for the colors as well as I have

44
00:03:03,570 --> 00:03:05,340
different value for the text.

45
00:03:05,700 --> 00:03:11,400
So that's why instead of just true or false, which we will still use, there's going to be still a

46
00:03:11,400 --> 00:03:11,760
boolean.

47
00:03:11,760 --> 00:03:17,350
And I'm going to be sitting in this as an object and then there's going to be more properties with values.

48
00:03:17,640 --> 00:03:18,970
So first one will be show.

49
00:03:19,200 --> 00:03:23,070
So this is going to be that boolean, which, by the way, by default will be false.

50
00:03:23,340 --> 00:03:28,170
Then the message, what we're going to display inside and then also the type.

51
00:03:28,560 --> 00:03:31,770
And for a type, there's going to be either success or danger.

52
00:03:32,070 --> 00:03:34,790
Now, I borrowed those class names from the bootstrap.

53
00:03:34,800 --> 00:03:36,240
There's nothing specific about them.

54
00:03:36,540 --> 00:03:41,000
Danger is the red one and the success one is the green one.

55
00:03:41,010 --> 00:03:42,510
So of course, we have the item.

56
00:03:42,510 --> 00:03:43,320
Then it's success.

57
00:03:43,320 --> 00:03:47,010
If we delete it, then we display that we have a danger.

58
00:03:47,010 --> 00:03:48,120
We deleted the item.

59
00:03:48,930 --> 00:03:49,450
OK, good.

60
00:03:49,930 --> 00:03:57,420
And now as far as our return, it's not going to be heading to is going to be a section let's add a

61
00:03:57,430 --> 00:04:02,880
class name here and let's say S. Santur, beautiful.

62
00:04:03,270 --> 00:04:08,550
On the inside of this section, I would want to go with a form.

63
00:04:09,060 --> 00:04:11,570
And then also there's going to be a list.

64
00:04:12,060 --> 00:04:18,660
Now, the Gocha for the list is going to be that I only will want to display that list if there are

65
00:04:18,660 --> 00:04:20,520
some items in the list.

66
00:04:21,030 --> 00:04:24,900
So I don't know, maybe in the beginning, let's not set up that flag.

67
00:04:25,210 --> 00:04:26,520
Let's always display that.

68
00:04:26,520 --> 00:04:32,580
Let's just remember that if you'll check out the app, you'll see that by default, if there are no

69
00:04:32,580 --> 00:04:36,030
items, then the list, of course, is not displayed.

70
00:04:36,420 --> 00:04:43,110
But for the time being, since we don't have any items, we might as well added side by side where we

71
00:04:43,110 --> 00:04:45,060
have the form and then we have the list.

72
00:04:45,390 --> 00:04:48,500
So maybe let's do it this way first.

73
00:04:48,750 --> 00:04:51,360
And my dear, it's going to have a class name.

74
00:04:52,710 --> 00:04:59,460
And grocery container, like I said, eventually there's going to be conditional rendering, but not

75
00:04:59,460 --> 00:05:04,170
right now and in here I would want to go with list component.

76
00:05:04,710 --> 00:05:08,340
Of course, I'm already importing and it's just going to say list component.

77
00:05:08,760 --> 00:05:14,190
So we should have something like this online right next to the list.

78
00:05:14,520 --> 00:05:20,940
But still within this div, I would want to go with a button and then here we're going to go with class

79
00:05:20,940 --> 00:05:27,870
name and we're going to have a clear beat in class and on Kallick.

80
00:05:27,870 --> 00:05:29,150
We're going to clear the list.

81
00:05:29,160 --> 00:05:36,240
Now we don't have the function yet, so let's just put this on on nice and we're going to have clear

82
00:05:36,240 --> 00:05:37,510
items of value.

83
00:05:37,920 --> 00:05:38,990
OK, awesome.

84
00:05:39,250 --> 00:05:43,780
That should be our button on that right above our grocery container.

85
00:05:44,130 --> 00:05:47,310
Now, I'm going to set up my form now.

86
00:05:47,760 --> 00:05:50,550
I just set up my own submits and forms.

87
00:05:50,940 --> 00:05:55,530
But just please keep in mind that if you want, you can do on click on a button.

88
00:05:56,070 --> 00:05:57,780
So there's going to be a submit button.

89
00:05:58,020 --> 00:06:00,870
And yes, you can definitely set up on click.

90
00:06:01,080 --> 00:06:05,820
Just remember that if I'm sitting on submit on the form, then on a button.

91
00:06:05,970 --> 00:06:10,170
If you don't like this approach, you would need to go with on click.

92
00:06:10,380 --> 00:06:11,670
So let's start with class name.

93
00:06:12,970 --> 00:06:21,220
And in here, we're going to go with grocery, former grocery form, and also, like I said, there's

94
00:06:21,220 --> 00:06:25,060
going to be on submit mine as well right away.

95
00:06:25,390 --> 00:06:29,500
Had it met now, there's not going to be much functionality.

96
00:06:29,500 --> 00:06:31,740
There are just blogs and all that stuff.

97
00:06:32,020 --> 00:06:38,880
So it's got const handle sub Amet and I'm looking for event object.

98
00:06:38,890 --> 00:06:45,610
Of course I would want to prevent a default event and default and then let's just cancel log.

99
00:06:46,030 --> 00:06:46,470
Hello.

100
00:06:46,930 --> 00:06:47,160
OK.

101
00:06:47,500 --> 00:06:55,240
Not much originality over there but I think that Qadoura and then what else I would want, I would want

102
00:06:55,240 --> 00:07:04,180
to display my art show right within the form but above everything else that we're going to be setting

103
00:07:04,180 --> 00:07:04,450
up.

104
00:07:04,750 --> 00:07:07,180
I would want to set up Mylord now.

105
00:07:07,180 --> 00:07:10,050
Alert will depend on that value.

106
00:07:10,300 --> 00:07:17,830
So what I'm going to do is alert and then show some checking for the property of show more specific

107
00:07:17,830 --> 00:07:19,600
for the value of that property.

108
00:07:19,840 --> 00:07:22,240
And if that is the case, I would want to display it.

109
00:07:22,540 --> 00:07:25,570
Now, there's going to be more things that we're going to add in alert.

110
00:07:25,870 --> 00:07:32,220
But for the time being, let's just add this conditional and that where we have the alert by default,

111
00:07:32,230 --> 00:07:36,400
let's set it up to true just so we can see that our functionality works.

112
00:07:36,700 --> 00:07:40,000
And there is now, of course, we have alert component, which is beautiful.

113
00:07:40,550 --> 00:07:41,500
Now I can delete it.

114
00:07:41,500 --> 00:07:43,030
We can go back to the default.

115
00:07:43,330 --> 00:07:45,660
And again, we cannot see the alert.

116
00:07:46,030 --> 00:07:51,220
So right after the alert, we're going to go with my three and I'm going to call this grocery.

117
00:07:51,850 --> 00:07:59,800
But eventually that is going to be the title and we're going to go with Dave with a class of form control.

118
00:08:00,130 --> 00:08:05,620
Now, this one is just for styling, so there's nothing as far as react.

119
00:08:06,310 --> 00:08:12,900
I just added the class from control and then we have the input and of course, we'll also have the button.

120
00:08:13,240 --> 00:08:18,880
So since the input has more attributes for let's just add a button and line for the button.

121
00:08:18,880 --> 00:08:23,310
We're looking for type, which is going to be subnet, of course.

122
00:08:23,680 --> 00:08:26,190
And also I'd want to add a class name.

123
00:08:26,560 --> 00:08:28,270
So here we go.

124
00:08:28,540 --> 00:08:36,990
We have a class name of subnet and line hyphen beeton inside of the button, though I don't want to

125
00:08:37,000 --> 00:08:43,780
add, just submit because when I'm going to be editing, I will also have different values and that

126
00:08:43,780 --> 00:08:44,650
is going to be added.

127
00:08:45,130 --> 00:08:47,170
So in here I'm going to go is editing.

128
00:08:47,440 --> 00:08:48,640
So I'll check.

129
00:08:48,940 --> 00:08:53,650
And if that is the case, if everything is true, then of course I'll display at it.

130
00:08:53,920 --> 00:08:56,500
If not, then I'll say submit.

131
00:08:56,830 --> 00:08:58,330
Now what is the value by default?

132
00:08:58,750 --> 00:09:00,670
Course it is false.

133
00:09:00,670 --> 00:09:01,090
Correct.

134
00:09:01,340 --> 00:09:02,540
That's why I see the submit.

135
00:09:02,920 --> 00:09:08,080
So if I change this, which of course eventually will do dynamically, then of course I'll have my at

136
00:09:08,080 --> 00:09:08,260
it.

137
00:09:08,650 --> 00:09:12,460
So let me set it up back to force and we are in good shape.

138
00:09:12,610 --> 00:09:14,770
So then we have this text.

139
00:09:15,620 --> 00:09:23,150
And I would want to add a little bit of styling here, so I'm going to go with girl, that is my class,

140
00:09:23,150 --> 00:09:29,430
of course, then I'll add some placeholder just so the user knows what he or she needs to type.

141
00:09:29,750 --> 00:09:37,100
So we're going to go with an example and then we're going to type X and now let's set up our controlled

142
00:09:37,100 --> 00:09:43,170
input so we have our value attribute, which is equal to what amount is equal to my name.

143
00:09:43,290 --> 00:09:52,200
Of course, that is my state now and then on change, so on change, which of course is equal to my

144
00:09:52,220 --> 00:09:53,080
inline function.

145
00:09:53,570 --> 00:10:03,170
I grab my event object and then I go with a set name and then I pass in event Target and then I have

146
00:10:03,170 --> 00:10:08,120
the value so I can save navigate to a bigger browser window.

147
00:10:08,510 --> 00:10:10,360
I can open up three thousand.

148
00:10:10,720 --> 00:10:11,390
There it is.

149
00:10:11,390 --> 00:10:12,260
There is my app.

150
00:10:12,770 --> 00:10:19,460
I can of course check the components and see that I have my less beautiful I have all my state value.

151
00:10:19,500 --> 00:10:22,930
So as I start typing now, this is going to be my set value.

152
00:10:23,180 --> 00:10:28,680
And then if everything is correct, I should see in the console, which of course I do.

153
00:10:28,940 --> 00:10:35,180
So now we know that our structure is correct and now we can proceed to more interesting things.