1
00:00:00,150 --> 00:00:07,800
Nice work, we've got our set up form, and once we have the structure course, now it's deal with functionality

2
00:00:07,800 --> 00:00:16,830
where in the context, yes, we have handle change function at the moment, we're just logging the event

3
00:00:16,830 --> 00:00:17,280
object.

4
00:00:17,790 --> 00:00:20,120
However, from the event object.

5
00:00:20,130 --> 00:00:27,120
What I would want, I would want what is the name of the target, whether that is my mount or category

6
00:00:27,420 --> 00:00:28,500
or difficulty.

7
00:00:28,980 --> 00:00:35,580
And then also I'd want to get the value and we can do that by adding two variables or const and the

8
00:00:35,580 --> 00:00:38,030
name is going to be equal to event target.

9
00:00:38,040 --> 00:00:40,860
And by the way, keep on struggling with const.

10
00:00:42,090 --> 00:00:46,170
And I'm going to go with Target here, and we're looking for a name.

11
00:00:46,890 --> 00:00:54,150
So remember in the last video I mentioned probably 50 thousand times that names need to match and the

12
00:00:54,150 --> 00:00:59,210
reason why we need to match, because in order to get those values, I'll use this name value.

13
00:00:59,640 --> 00:01:04,800
And not only that, I also would want to get the value that is coming from the input.

14
00:01:05,190 --> 00:01:12,060
So first, I would want to get the name so that I know, hey, this is the questions, input or category

15
00:01:12,060 --> 00:01:12,900
or difficulty.

16
00:01:13,260 --> 00:01:14,430
And then the second one will.

17
00:01:14,430 --> 00:01:17,460
What is the actual value that is coming back on?

18
00:01:17,460 --> 00:01:21,870
In order to get that, we go with event and then target and then value.

19
00:01:22,050 --> 00:01:24,770
And if you want, of course, you can control it.

20
00:01:25,110 --> 00:01:26,910
So let's go with name and value.

21
00:01:27,780 --> 00:01:32,880
And you'll see once you navigate to the bigger screen that as you're changing these values.

22
00:01:33,060 --> 00:01:40,590
So every time you type something in the input, you'll get back to things, you'll get the name of the

23
00:01:40,590 --> 00:01:43,020
input and what is the value that is coming back.

24
00:01:43,380 --> 00:01:45,630
Now, don't worry, of course, we're not changing anything.

25
00:01:46,050 --> 00:01:52,980
As far as the you are yet noticed, it's still outstand because we haven't changed anything in a state

26
00:01:52,980 --> 00:01:53,160
yet.

27
00:01:53,430 --> 00:02:00,540
But it is a good start because I can say that I'm getting my difficulty input and then the value is

28
00:02:00,540 --> 00:02:00,910
medium.

29
00:02:01,590 --> 00:02:03,900
Now, how do we change the values in the state?

30
00:02:04,320 --> 00:02:11,640
Well, I purposely set up everything as a object because the more input I would have and more, of course,

31
00:02:11,910 --> 00:02:15,120
state values I would need to create and then separate functions and all that.

32
00:02:15,510 --> 00:02:18,360
So in this case, I created everything as an object.

33
00:02:19,480 --> 00:02:25,210
And I can simply use the fact that we can set object properties dynamically.

34
00:02:26,080 --> 00:02:27,220
So what am I talking about here?

35
00:02:27,580 --> 00:02:35,320
Well, I could go set quiz now, since it is an object, every time I change something about one of

36
00:02:35,320 --> 00:02:39,280
the inputs, of course, I wouldn't want to wipe out the rest of the correct.

37
00:02:39,550 --> 00:02:45,850
So I'm going to go down that not and I'll spread out the old values, the quiz, and then I'll dynamically

38
00:02:45,850 --> 00:02:49,730
change the property and I'll pass in the name.

39
00:02:50,140 --> 00:02:54,320
So remember, the target name has the name of my input.

40
00:02:54,640 --> 00:03:02,650
Now that name matches exactly the proper names that I have here in the object, in a state value so

41
00:03:02,650 --> 00:03:09,850
that I can dynamically change them and say change the property whose value is equal to nine, whether

42
00:03:09,850 --> 00:03:13,020
that is a difficult category or amount.

43
00:03:13,270 --> 00:03:19,900
And as far as the value know, I already have the value coming from the event that target value.

44
00:03:20,290 --> 00:03:25,870
And what you'll notice right now if you navigate through the bigger screen, we have our provider notice

45
00:03:25,870 --> 00:03:26,170
here.

46
00:03:26,230 --> 00:03:33,880
I have a mountain category in sports and then every time I'll change this value, I notice how I'm dynamically

47
00:03:34,000 --> 00:03:34,700
changing this.

48
00:03:35,170 --> 00:03:37,540
So now, of course, amount is equal to one.

49
00:03:37,990 --> 00:03:44,140
And then, for example, if I change the category to the history now, of course, my state value also

50
00:03:44,290 --> 00:03:45,010
will change.

51
00:03:45,280 --> 00:03:50,320
Now, don't worry about the fact that this is a strength, because remember, even though it was a no

52
00:03:50,320 --> 00:03:53,390
input, once we get the value, it is coming back a string.

53
00:03:53,760 --> 00:03:56,930
This is going to be the case where it doesn't affect our functionality.

54
00:03:57,490 --> 00:04:03,970
Most importantly, remember, if you want to set up control inputs and you have quite a few of them,

55
00:04:04,450 --> 00:04:12,670
it's a very good practice to set it up as an object and then use the fact that name value is going to

56
00:04:12,670 --> 00:04:14,920
be equal to one of the properties.

57
00:04:15,310 --> 00:04:20,020
Keep in mind, again, this comes back as amount category or difficulty.

58
00:04:20,680 --> 00:04:27,250
And then I'm just saying, hey, get me all the values that I currently have in the object and then

59
00:04:27,550 --> 00:04:34,300
get that property name, whatever it is, whether that is the difficulty category and questions.

60
00:04:34,310 --> 00:04:40,030
And again, if you need to go back to my JavaScript Nugget series where I cover Dynamic Properties,

61
00:04:40,330 --> 00:04:42,670
please do so because I'm not going to repeat that.

62
00:04:42,940 --> 00:04:49,150
And when it comes to value, whatever we're getting back, whether or not it's 110 or different category

63
00:04:49,390 --> 00:04:50,530
or different difficulty.

64
00:04:51,440 --> 00:04:56,320
Hopefully that is clear and of course, we can deal with the handle submit.