Let's see how we can pass a given to the event handlers.
When you say passing a given.
It simply means that when the event is being called, we can pass in some additional data based on the
function requirements.
And let's say that you have a button that needs to know which item in the list was clicked on.
You can pass the index of the item as an argument to the button that is been clicked on.
But because we haven't talked about how to handle forms, let's ignore this and then let's go by this.
So this is where we left in the previous video.
When I click on the button, it just gives me this elect.
So what we are going to do is that instead of just electing this one, let's do some computation here
and let's say that we want to pass in some arguments, let's say A and B, and here we are going to
add the A and B, so const, let's say, result.
Result is equal to A plus B simple function here and we just want to cancel that log.
The result?
Here.
So when you call the function so let's see if let's check the console.
And now nothing seems to be displayed because we haven't clicked on a button.
If I click on that, you see that I have undefined meaning that when I call this function I didn't pass
in the requirement.
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
on this one, but it has given me 30.
So how can we call a function this way when we click on a button because something and a new function,
remember, and then what functions are functions that has no name so we can write a valid function as
this.
My every function in this function is pretty good, right?
So you can create a function console that log and then let's say console up a function this way and
then console dot.
But consider the dirt log and say, Hey, animals or whatever like that.
Hey.
Okay.
Hey.
It's okay for testing purposes.
Check it out if I save it.
Check the console.
See that?
Well, I need to pass this function inside a function because it has no name.
Right.
So it is a valid, I mean, function.
So instead of this way, I mean, this way, I'm going to call the function animals like this one and
then my arrow function and this is valid so I can remove this one.
And now this valid calling the function, if you want to call the function this way, pass it to the
anonymous function on the on click and now let's refresh it.
Nothing seems to be displayed because the function is not being yet called.
If I call a function, boom, I have 30.
So that's how you pass in argument a function.
And for this annual function here we have what is called event type.
We want know more about the event attributes on the button that was being clicked.
We have access to it.
So now let's remove this one then let's pass in the E for this.
For the meantime, passing the E and now we can access the E here the event, and now let's console.log
the event and let's see more the event that has been triggered.
If I refresh it and I click on it, see that I have all the attributes on the event that was being clicked
on.
So as you move on, we are going to explore more and make use of event handlers in React and this video.
Let's get started with how we can manage state in react using use state hook.