1 00:00:00,390 --> 00:00:01,530 In this video. 2 00:00:01,530 --> 00:00:05,790 Let's see how we can listen to event. 3 00:00:05,790 --> 00:00:10,460 That is how we can create events and then respond to. 4 00:00:11,070 --> 00:00:16,800 We are going to create a simple event and then if you click on a button, it's going to trigger that 5 00:00:16,800 --> 00:00:17,520 event. 6 00:00:18,090 --> 00:00:18,870 All right. 7 00:00:18,870 --> 00:00:19,530 All right. 8 00:00:19,530 --> 00:00:25,650 So coming back here because is a new concept inside mind component. 9 00:00:25,800 --> 00:00:36,840 Let's create a new folder and correlate events and let's create the file, the components called event 10 00:00:36,870 --> 00:00:38,220 op dot g's. 11 00:00:38,220 --> 00:00:38,700 Sorry. 12 00:00:40,540 --> 00:00:46,410 Add DJ's and let's go forward using the snippet RFC. 13 00:00:46,410 --> 00:00:55,050 And then there we go and let's add some nested H three and of as event. 14 00:00:56,090 --> 00:00:58,640 Listening ore event handler. 15 00:01:00,710 --> 00:01:06,560 So what we are going to do is that unless you call this component, so let's go to the app and then 16 00:01:06,560 --> 00:01:07,520 render the component. 17 00:01:07,520 --> 00:01:13,130 So now let's bring in the event component, the event. 18 00:01:13,130 --> 00:01:15,050 So import. 19 00:01:15,230 --> 00:01:21,980 Let me class this side, import the event component and I have my event component. 20 00:01:21,980 --> 00:01:32,420 So let me comment out this once and next is let me display my event component and indeed I have my event. 21 00:01:32,840 --> 00:01:40,160 So the logic we are going to use is that we are going to create an event when we click. 22 00:01:40,160 --> 00:01:50,300 An embodiment is just going to display a data to the console or to the or to elect it or display it 23 00:01:50,300 --> 00:01:51,290 on the browser. 24 00:01:51,320 --> 00:01:52,340 So let's see. 25 00:01:52,340 --> 00:01:55,310 So here is how we insert a component. 26 00:01:55,310 --> 00:02:02,270 We can create a function inside a component so we can call it as const handle. 27 00:02:02,990 --> 00:02:04,270 Hand or click. 28 00:02:04,280 --> 00:02:10,580 Any react we normally use handle and then the name of the function. 29 00:02:10,940 --> 00:02:13,580 So you're going to be a normal arrow function. 30 00:02:14,300 --> 00:02:20,300 And when this when the button is being clicked, I just want to select, let's say. 31 00:02:20,930 --> 00:02:21,830 Oh. 32 00:02:23,020 --> 00:02:26,320 I'm clicked like that. 33 00:02:26,320 --> 00:02:27,790 So now I have my function. 34 00:02:27,800 --> 00:02:35,290 How can I trigger it unless I bring in a button or any element that I want to click on? 35 00:02:35,500 --> 00:02:38,500 So let me bring in button. 36 00:02:38,710 --> 00:02:42,760 And then on that, on this button, let me call this one. 37 00:02:43,000 --> 00:02:45,970 Ask click me, click me. 38 00:02:46,810 --> 00:02:47,720 Oh, aye. 39 00:02:47,920 --> 00:02:48,790 See here. 40 00:02:49,060 --> 00:02:49,930 So let's see. 41 00:02:49,930 --> 00:02:52,420 Now I have the button click when I click on it. 42 00:02:52,420 --> 00:02:54,220 Nothing happened. 43 00:02:54,640 --> 00:02:58,480 So the first logic in mind is that. 44 00:02:59,330 --> 00:03:05,020 I mean, event handlers are communicating, talking about the rules here using camel casing. 45 00:03:05,030 --> 00:03:10,910 So here the first event event type is what is called on click. 46 00:03:10,910 --> 00:03:14,140 And some things start with on on the event. 47 00:03:14,140 --> 00:03:23,810 So you want what is called on click, which is a function and here I'll pass in my event my function 48 00:03:23,810 --> 00:03:24,260 here. 49 00:03:24,440 --> 00:03:29,030 So maybe thinking that we are going to call a function as this. 50 00:03:29,030 --> 00:03:37,790 If you call this way, it means that you are or this component is calling this function automatically. 51 00:03:38,150 --> 00:03:42,380 So as soon as this component being rendered, this function will be called. 52 00:03:42,380 --> 00:03:44,240 So let's save it. 53 00:03:44,240 --> 00:03:45,560 And let me show you what I mean here. 54 00:03:45,560 --> 00:03:51,500 When I save this component and now you see that automatically we have been triggered. 55 00:03:51,620 --> 00:03:59,360 So to avoid that, we shouldn't allow the component to call this function, but instead upon being clicked. 56 00:03:59,360 --> 00:04:06,890 So we're not going to call it in this way, but instead this way if I save it now let's refresh it. 57 00:04:06,920 --> 00:04:13,490 I see that nothing appears, but as soon as I click on, click me the button being appeared like that. 58 00:04:14,270 --> 00:04:14,870 All right. 59 00:04:14,870 --> 00:04:18,290 But let's say that you want to stick to this. 60 00:04:18,620 --> 00:04:24,380 Well, there are some use cases where we need to call a function this way and passing some argument. 61 00:04:24,380 --> 00:04:29,840 And that is what we talk about in this video, how we can pass some argument to a function. 62 00:04:29,930 --> 00:04:35,390 For the meantime, this is how you create a function event handler and then listen to. 63 00:04:35,600 --> 00:04:42,530 So again, we can have most of the event time, but like I said, these are the commonly used ones we 64 00:04:42,530 --> 00:04:45,560 can explore more as we proceed in this section. 65 00:04:45,560 --> 00:04:52,400 Then this video, we are going to improve a little bit about how we can pass in some argument to a function.