In this video.
Let's see how we can listen to event.
That is how we can create events and then respond to.
We are going to create a simple event and then if you click on a button, it's going to trigger that
event.
All right.
So coming back here because is a new concept inside mind component.
Let's create a new folder and correlate events and let's create the file, the components called event
op dot g's.
Sorry.
Add DJ's and let's go forward using the snippet RFC.
And then there we go and let's add some nested H three and of as event.
Listening ore event handler.
So what we are going to do is that unless you call this component, so let's go to the app and then
render the component.
So now let's bring in the event component, the event.
So import.
Let me class this side, import the event component and I have my event component.
So let me comment out this once and next is let me display my event component and indeed I have my event.
So the logic we are going to use is that we are going to create an event when we click.
An embodiment is just going to display a data to the console or to the or to elect it or display it
on the browser.
So let's see.
So here is how we insert a component.
We can create a function inside a component so we can call it as const handle.
Hand or click.
Any react we normally use handle and then the name of the function.
So you're going to be a normal arrow function.
And when this when the button is being clicked, I just want to select, let's say.
Oh.
I'm clicked like that.
So now I have my function.
How can I trigger it unless I bring in a button or any element that I want to click on?
So let me bring in button.
And then on that, on this button, let me call this one.
Ask click me, click me.
Oh, aye.
See here.
So let's see.
Now I have the button click when I click on it.
Nothing happened.
So the first logic in mind is that.
I mean, event handlers are communicating, talking about the rules here using camel casing.
So here the first event event type is what is called on click.
And some things start with on on the event.
So you want what is called on click, which is a function and here I'll pass in my event my function
here.
So maybe thinking that we are going to call a function as this.
If you call this way, it means that you are or this component is calling this function automatically.
So as soon as this component being rendered, this function will be called.
So let's save it.
And let me show you what I mean here.
When I save this component and now you see that automatically we have been triggered.
So to avoid that, we shouldn't allow the component to call this function, but instead upon being clicked.
So we're not going to call it in this way, but instead this way if I save it now let's refresh it.
I see that nothing appears, but as soon as I click on, click me the button being appeared like that.
All right.
But let's say that you want to stick to this.
Well, there are some use cases where we need to call a function this way and passing some argument.
And that is what we talk about in this video, how we can pass some argument to a function.
For the meantime, this is how you create a function event handler and then listen to.
So again, we can have most of the event time, but like I said, these are the commonly used ones we
can explore more as we proceed in this section.
Then this video, we are going to improve a little bit about how we can pass in some argument to a function.