1
00:00:00,330 --> 00:00:05,490
So now we'll give some JavaScript to our component right now, we have just given the basic structure

2
00:00:05,490 --> 00:00:06,720
and the things are static.

3
00:00:07,500 --> 00:00:09,960
But now let us give some JavaScript.

4
00:00:09,960 --> 00:00:15,990
So you already know that the script is written after the function and before they're done and after

5
00:00:15,990 --> 00:00:21,150
they return to the Chest X, the letters give JavaScript.

6
00:00:21,690 --> 00:00:28,110
So here will make use of the very common, very useful Hulk of the Act.

7
00:00:28,680 --> 00:00:36,780
That is the use that also let me the very first thing we started with imported from the react to use.

8
00:00:41,650 --> 00:00:46,150
And I'll create a hope I'll create a state variable in the whole here.

9
00:00:47,390 --> 00:00:50,190
And that would be concerned.

10
00:00:50,240 --> 00:00:52,400
Now what I'm going to do is.

11
00:00:54,650 --> 00:01:04,910
Said the venue for the whatever is being imported inside that so that I'm going to set as they use it

12
00:01:04,910 --> 00:01:07,670
every time that venue will be stored here.

13
00:01:07,880 --> 00:01:08,330
OK.

14
00:01:10,220 --> 00:01:10,640
No.

15
00:01:11,840 --> 00:01:19,550
We'll create an array of objects, or basically you can just go ahead with the object known and often

16
00:01:19,550 --> 00:01:26,120
that will directly create an object correct to that object will be name is not and the function responsible

17
00:01:26,120 --> 00:01:30,580
for changing that particular object will be sad thought.

18
00:01:31,400 --> 00:01:32,150
Oh yeah.

19
00:01:32,780 --> 00:01:37,700
And here you will hit the initial value of that particular.

20
00:01:38,920 --> 00:01:46,660
And still ahead, you will get this and there are days that would be, I don't.

21
00:01:49,360 --> 00:01:50,650
That would be empty.

22
00:01:52,450 --> 00:01:57,040
And next will be the and.

23
00:02:02,430 --> 00:02:10,190
So this also would be empty as of the beginning, but as the like you said, what type and things can

24
00:02:10,200 --> 00:02:12,780
go and be stored inside this?

25
00:02:13,290 --> 00:02:13,760
OK.

26
00:02:14,590 --> 00:02:15,660
Okay.

27
00:02:16,530 --> 00:02:20,510
Now an extra we'll do is we'll handle the change.

28
00:02:21,060 --> 00:02:23,460
Like, let me minimize the terminal.

29
00:02:26,350 --> 00:02:30,740
And what the user is typing inside this and or the text.

30
00:02:31,790 --> 00:02:37,750
So whenever the value of this is what should be the function that it triggered.

31
00:02:38,870 --> 00:02:40,580
That would be the handle chain.

32
00:02:41,460 --> 00:02:44,610
So we try to function.

33
00:02:46,350 --> 00:02:52,810
And name it as though being read as boss argument.

34
00:02:54,840 --> 00:03:02,460
Or you can even boss event, basically event and the lake, whatever you can pass, but EA and event

35
00:03:02,460 --> 00:03:03,720
other general conventions.

36
00:03:05,180 --> 00:03:06,620
And you're.

37
00:03:08,060 --> 00:03:15,230
Inside this wheel, we are doing this for the name so on.

38
00:03:16,280 --> 00:03:23,440
And this is named Sunbeam name and value.

39
00:03:25,030 --> 00:03:29,410
So this will be affected, so be dark to get dark.

40
00:03:32,090 --> 00:03:32,540
That's it.

41
00:03:33,220 --> 00:03:44,080
And now after that, what we want to see are, like what we want to give value to this sad note that

42
00:03:44,080 --> 00:03:45,880
is reward, which is required here.

43
00:03:46,480 --> 00:03:48,160
So for of these said note.

44
00:03:51,010 --> 00:03:55,600
There will be argument of free value.

45
00:03:57,650 --> 00:04:01,970
People knew and said this will be just.

46
00:04:04,000 --> 00:04:05,350
Returning something.

47
00:04:06,730 --> 00:04:14,710
Written and we'll be giving us parade operators, so that will be the value.

48
00:04:16,580 --> 00:04:16,840
Yeah.

49
00:04:17,890 --> 00:04:23,020
This is basically this argument saying you we just making use of it to prevent you.

50
00:04:24,070 --> 00:04:27,700
And after that, we'll give the name of a new.

51
00:04:28,790 --> 00:04:29,210
And.

52
00:04:30,890 --> 00:04:31,940
That will be a.

53
00:04:34,610 --> 00:04:34,940
Well.

54
00:04:38,780 --> 00:04:42,750
Basically, my view is lacking, I don't know why.

55
00:04:43,860 --> 00:04:45,080
Yeah, it's perfect.

56
00:04:45,550 --> 00:04:48,570
So that will be a value, not semicolon, just a comma here.

57
00:04:50,280 --> 00:04:55,580
We can just look up here and here as it.

58
00:04:56,930 --> 00:04:57,460
And then.

59
00:04:58,740 --> 00:05:00,920
OK, so that's cool.

60
00:05:01,510 --> 00:05:10,620
And now what we'll do is we'll force another function to create another function for the partner.

61
00:05:11,100 --> 00:05:19,560
Like whenever we press the button, what happens and what should be the like, what should be the triggering

62
00:05:19,560 --> 00:05:22,560
function that happens whenever I click this button?

63
00:05:23,160 --> 00:05:29,670
Before that, I will create another function that would be some button or handle something, whatever

64
00:05:29,670 --> 00:05:32,190
you want to call it a like.

65
00:05:32,520 --> 00:05:33,450
It doesn't matter.

66
00:05:34,940 --> 00:05:35,870
But that will be.

67
00:05:37,260 --> 00:05:44,870
Some I'm button and then side this that will be in force eventually.

68
00:05:45,540 --> 00:05:46,830
Completely depends on you.

69
00:05:49,500 --> 00:05:51,280
That will be on.

70
00:05:54,380 --> 00:05:54,700
And.

71
00:05:55,830 --> 00:05:56,820
That is the vineyard.

72
00:05:57,760 --> 00:05:58,630
I know.

73
00:05:59,190 --> 00:06:03,380
What is the thing which we want to give after this?

74
00:06:03,880 --> 00:06:04,290
So.

75
00:06:05,620 --> 00:06:08,770
Bill said did not say.

76
00:06:09,730 --> 00:06:12,220
Note this free to the final word.

77
00:06:12,610 --> 00:06:12,920
OK.

78
00:06:13,480 --> 00:06:14,440
Insert the note.

79
00:06:15,680 --> 00:06:17,390
Side, though, and.

80
00:06:24,700 --> 00:06:25,800
And we'll wait.

81
00:06:26,870 --> 00:06:27,470
And then.

82
00:06:32,190 --> 00:06:37,370
And after this, we'll do the event or.

83
00:06:38,710 --> 00:06:39,580
Prevent default.

84
00:06:40,990 --> 00:06:45,670
Why I'm using this, because I don't want the page to refresh as soon as I click the button.

85
00:06:46,120 --> 00:06:49,150
Like what is that natural behavior off of form?

86
00:06:49,690 --> 00:06:56,530
The natural behavior to perform is that whenever you hate the summit button or whenever does some function

87
00:06:56,530 --> 00:06:59,110
of that particular form, it's called for.

88
00:06:59,170 --> 00:07:08,470
The basic tendency of that form is that it forces the page to refresh, but we don't want that actually.

89
00:07:08,710 --> 00:07:09,070
OK.

90
00:07:09,490 --> 00:07:11,650
So let me make it inaccurate.

91
00:07:12,010 --> 00:07:18,360
We don't want that to happen because that's what the act is all about and react.

92
00:07:18,400 --> 00:07:19,640
Page does not reflect.

93
00:07:19,660 --> 00:07:23,620
That's why it's called a single page application, and you don't need to refresh the page for making

94
00:07:23,620 --> 00:07:26,200
changes inside the components or.

95
00:07:27,210 --> 00:07:32,310
Inside the application, but that's why we don't want it to be refreshed, and so that's why you're

96
00:07:32,320 --> 00:07:34,590
not ready for it.

97
00:07:34,920 --> 00:07:37,920
If we provide a semicolon.

98
00:07:39,600 --> 00:07:41,630
I think that's a our time.

99
00:07:42,210 --> 00:07:42,460
Yeah.

100
00:07:43,150 --> 00:07:48,320
No, we want to add these functions or I we want to call these functions on the particular.

101
00:07:49,730 --> 00:07:53,570
Particular like elements, wherever they are.

102
00:07:54,560 --> 00:07:55,460
So for that.

103
00:07:57,010 --> 00:07:58,650
We will go to hell.

104
00:07:59,470 --> 00:08:07,000
Yeah, one more thing I want to make is whenever I click on the title Burton, I'll go back that the

105
00:08:07,840 --> 00:08:08,680
description.

106
00:08:09,550 --> 00:08:13,960
Next, what should be appeared so before, like at the beginning, it should be done.

107
00:08:13,960 --> 00:08:18,530
And when I click as soon as I click on, the title should be included.

108
00:08:18,850 --> 00:08:28,810
Before that, I need to set out a state that will be known as the expanded is expanded or not, or that

109
00:08:28,810 --> 00:08:35,010
I'll create with constant something's going on.

110
00:08:36,740 --> 00:08:37,570
Who wants?

111
00:08:39,040 --> 00:08:41,620
And here it will be is.

112
00:08:42,640 --> 00:08:43,800
Extended.

113
00:08:48,340 --> 00:08:49,720
Is expanded.

114
00:08:51,560 --> 00:08:52,430
You can give it the.

115
00:08:53,400 --> 00:08:53,820
Is.

116
00:08:55,930 --> 00:08:57,250
Thanks, Ben.

117
00:08:58,320 --> 00:08:59,200
And here.

118
00:09:00,330 --> 00:09:00,720
Thank.

119
00:09:01,870 --> 00:09:03,010
Expanded.

120
00:09:06,380 --> 00:09:08,180
After that, that will be used to.

121
00:09:10,390 --> 00:09:15,730
Is that a scientist that will be the initial values initially that will be false?

122
00:09:16,880 --> 00:09:21,590
OK, initially, that is false and true, we'll go down.

123
00:09:23,720 --> 00:09:26,600
And will create a function for that.

124
00:09:28,400 --> 00:09:29,150
That will be.

125
00:09:30,170 --> 00:09:30,980
Function.

126
00:09:32,850 --> 00:09:33,260
And

127
00:09:36,030 --> 00:09:36,330
that.

128
00:09:41,040 --> 00:09:46,290
Head inside the handle, it will set the.

129
00:09:48,710 --> 00:09:49,670
Start expended.

130
00:09:51,200 --> 00:09:51,530
Through.

131
00:09:52,930 --> 00:10:02,850
OK, now I think most of our work is done now we can go down and we can just call the expected function.

132
00:10:06,030 --> 00:10:12,330
But what we will do is first, we will handle the expanded only what we will do their part in Typekit

133
00:10:12,330 --> 00:10:16,440
inside the clearances and how the line is next.

134
00:10:16,790 --> 00:10:21,330
And third, if that is true, so.

135
00:10:23,050 --> 00:10:26,740
We will display this what we will display.

136
00:10:28,670 --> 00:10:29,630
Basically.

137
00:10:30,790 --> 00:10:33,610
The input this one.

138
00:10:37,210 --> 00:10:37,850
So over.

139
00:10:39,200 --> 00:10:41,810
Yeah, this is we actually want.

140
00:10:43,280 --> 00:10:48,650
Inside input will give some things like, first of all, let me give the value like, no, there's no

141
00:10:48,650 --> 00:10:49,340
value to it.

142
00:10:49,790 --> 00:10:50,840
So when you.

143
00:10:52,830 --> 00:10:57,000
Value would be a dark title.

144
00:10:59,410 --> 00:11:01,010
And Typekit text.

145
00:11:01,720 --> 00:11:05,140
All that I've already given name, I've already given, and not one change.

146
00:11:06,250 --> 00:11:07,060
One change.

147
00:11:08,020 --> 00:11:08,360
So.

148
00:11:09,830 --> 00:11:10,460
That'll change.

149
00:11:14,470 --> 00:11:17,490
And that'll change absurd, absurd civic duty.

150
00:11:17,830 --> 00:11:18,460
But, yeah.

151
00:11:19,630 --> 00:11:25,180
Now inside the tech studio, let us first to wrap this inside a paragraph after.

152
00:11:27,200 --> 00:11:27,650
OK.

153
00:11:28,830 --> 00:11:32,580
And that does putting this paragraph back down after the attacks studio.

154
00:11:34,680 --> 00:11:38,910
So, yeah, and inside this after the name.

155
00:11:40,050 --> 00:11:43,800
But after that exterior posting, which will give is defending new.

156
00:11:44,870 --> 00:11:47,930
When you yeah, I'll give.

157
00:11:49,470 --> 00:11:52,560
Or start going turn.

158
00:11:54,050 --> 00:11:54,770
But the venue.

159
00:11:55,900 --> 00:11:56,910
I live on Clark.

160
00:12:05,780 --> 00:12:07,580
I will call the handle expanded.

161
00:12:11,750 --> 00:12:20,650
The next expert and I will also call the on change basically of there will be an own change on change

162
00:12:21,520 --> 00:12:23,980
that will be called Lindsay and then.

163
00:12:28,980 --> 00:12:35,170
The change, and also I'll be changing the laws, according to The Expendables, true or not, then

164
00:12:35,340 --> 00:12:35,780
rose.

165
00:12:36,320 --> 00:12:44,390
And if that is true, linguistically is expended a straw vote, that will be Tinos.

166
00:12:45,080 --> 00:12:48,310
And if it's then, it was wonderful.

167
00:12:48,950 --> 00:12:49,490
Let me see.

168
00:12:50,120 --> 00:12:55,130
Yeah, it looks a lot more art, more cleaner than it was.

169
00:12:56,270 --> 00:13:02,780
And the last thing which we'll do is we'll create like this will give the functionality to this button.

170
00:13:03,320 --> 00:13:06,020
So here we'll try it on.

171
00:13:06,110 --> 00:13:06,470
Click.

172
00:13:09,580 --> 00:13:10,910
Is it the.

173
00:13:14,580 --> 00:13:14,910
Only.

174
00:13:17,070 --> 00:13:17,550
But on the other.

175
00:13:19,040 --> 00:13:19,430
Button.

176
00:13:28,420 --> 00:13:30,850
That is or that is all for this.

177
00:13:32,800 --> 00:13:34,600
We have to pass some props also.

178
00:13:35,570 --> 00:13:42,320
So this function create area like which then will be using the outdoor gear, so that will be something

179
00:13:42,950 --> 00:13:44,720
on the device here.

180
00:13:45,690 --> 00:13:46,290
That is it.

181
00:13:51,340 --> 00:13:52,570
Let me show you how this.

182
00:13:54,050 --> 00:13:54,440
I should.

183
00:14:03,370 --> 00:14:05,710
And right now, you can see that is only one rule.

184
00:14:06,010 --> 00:14:07,420
And then I click on it.

185
00:14:07,580 --> 00:14:08,500
There should be another one.

186
00:14:09,190 --> 00:14:10,430
You can see you and I clicked on it.

187
00:14:10,510 --> 00:14:11,350
There's another one.

188
00:14:11,650 --> 00:14:17,920
There it is what we actually wanted to do, or no, that is completed next would be giving some styling

189
00:14:17,920 --> 00:14:20,830
and all to the interior component.

190
00:14:20,990 --> 00:14:22,120
So we'll see in the next one.