1
00:00:00,420 --> 00:00:04,939
Let's see how we can pass a given to the event handlers.

2
00:00:04,950 --> 00:00:06,570
When you say passing a given.

3
00:00:06,600 --> 00:00:14,250
It simply means that when the event is being called, we can pass in some additional data based on the

4
00:00:14,250 --> 00:00:15,930
function requirements.

5
00:00:16,170 --> 00:00:23,730
And let's say that you have a button that needs to know which item in the list was clicked on.

6
00:00:23,760 --> 00:00:29,250
You can pass the index of the item as an argument to the button that is been clicked on.

7
00:00:29,250 --> 00:00:36,690
But because we haven't talked about how to handle forms, let's ignore this and then let's go by this.

8
00:00:37,020 --> 00:00:40,240
So this is where we left in the previous video.

9
00:00:40,260 --> 00:00:44,010
When I click on the button, it just gives me this elect.

10
00:00:44,370 --> 00:00:51,210
So what we are going to do is that instead of just electing this one, let's do some computation here

11
00:00:51,210 --> 00:00:58,590
and let's say that we want to pass in some arguments, let's say A and B, and here we are going to

12
00:00:58,590 --> 00:01:03,390
add the A and B, so const, let's say, result.

13
00:01:04,410 --> 00:01:12,340
Result is equal to A plus B simple function here and we just want to cancel that log.

14
00:01:12,560 --> 00:01:13,560
The result?

15
00:01:14,320 --> 00:01:15,010
Here.

16
00:01:15,280 --> 00:01:20,250
So when you call the function so let's see if let's check the console.

17
00:01:20,260 --> 00:01:25,470
And now nothing seems to be displayed because we haven't clicked on a button.

18
00:01:25,480 --> 00:01:33,010
If I click on that, you see that I have undefined meaning that when I call this function I didn't pass

19
00:01:33,010 --> 00:01:35,140
in the requirement.

20
00:01:35,140 --> 00:01:41,980
If I pass in, let's say ten and 20, let's see in the console, I'm going to have 30 if I didn't click

21
00:01:41,980 --> 00:01:43,870
on this one, but it has given me 30.

22
00:01:43,960 --> 00:01:51,970
So how can we call a function this way when we click on a button because something and a new function,

23
00:01:51,970 --> 00:01:59,620
remember, and then what functions are functions that has no name so we can write a valid function as

24
00:01:59,620 --> 00:02:00,100
this.

25
00:02:00,490 --> 00:02:04,090
My every function in this function is pretty good, right?

26
00:02:04,090 --> 00:02:12,640
So you can create a function console that log and then let's say console up a function this way and

27
00:02:12,640 --> 00:02:15,670
then console dot.

28
00:02:16,590 --> 00:02:27,480
But consider the dirt log and say, Hey, animals or whatever like that.

29
00:02:28,920 --> 00:02:29,610
Hey.

30
00:02:29,610 --> 00:02:29,840
Okay.

31
00:02:29,880 --> 00:02:30,120
Hey.

32
00:02:30,120 --> 00:02:32,460
It's okay for testing purposes.

33
00:02:33,100 --> 00:02:34,350
Check it out if I save it.

34
00:02:34,380 --> 00:02:35,060
Check the console.

35
00:02:35,140 --> 00:02:35,790
See that?

36
00:02:36,660 --> 00:02:42,600
Well, I need to pass this function inside a function because it has no name.

37
00:02:42,600 --> 00:02:43,140
Right.

38
00:02:43,140 --> 00:02:46,200
So it is a valid, I mean, function.

39
00:02:46,200 --> 00:02:53,340
So instead of this way, I mean, this way, I'm going to call the function animals like this one and

40
00:02:53,340 --> 00:02:57,480
then my arrow function and this is valid so I can remove this one.

41
00:02:57,480 --> 00:03:03,600
And now this valid calling the function, if you want to call the function this way, pass it to the

42
00:03:03,600 --> 00:03:08,250
anonymous function on the on click and now let's refresh it.

43
00:03:08,280 --> 00:03:12,650
Nothing seems to be displayed because the function is not being yet called.

44
00:03:12,660 --> 00:03:15,840
If I call a function, boom, I have 30.

45
00:03:15,990 --> 00:03:18,810
So that's how you pass in argument a function.

46
00:03:19,050 --> 00:03:23,970
And for this annual function here we have what is called event type.

47
00:03:23,970 --> 00:03:29,400
We want know more about the event attributes on the button that was being clicked.

48
00:03:29,430 --> 00:03:30,600
We have access to it.

49
00:03:30,600 --> 00:03:34,830
So now let's remove this one then let's pass in the E for this.

50
00:03:34,830 --> 00:03:42,630
For the meantime, passing the E and now we can access the E here the event, and now let's console.log

51
00:03:42,630 --> 00:03:47,310
the event and let's see more the event that has been triggered.

52
00:03:47,670 --> 00:03:55,650
If I refresh it and I click on it, see that I have all the attributes on the event that was being clicked

53
00:03:55,650 --> 00:03:56,250
on.

54
00:03:56,310 --> 00:04:04,800
So as you move on, we are going to explore more and make use of event handlers in React and this video.

55
00:04:04,830 --> 00:04:11,970
Let's get started with how we can manage state in react using use state hook.