When you interact with a page, you may click on something or press a key or do something else. All these interactions are considered events. When an event happens, an event object is also created. This object carries detailed information about exactly what happened, which element was targeted, what was clicked or typed or selected and so on. You can read more about the methods and properties contained in these event objects: firstlink and secondlink .
In the snippets you mentioned, we have defined an event handling function thus:
const handleChange = (event) => {
const newEmail = event.target.value;
setEmail(newEmail);
}
This is an arrow function where event is just the parameter of this function. There is nothing special about the parameter name event. We could have picked a different parameter name. We could have named our parameter usefulObject or soemthing else in which case our function would look like
const handleChange = (usefulObject) => { and we would use the parameter name usefulObject within our function body. However, since we are defining an event-handling function and we expect that once an event happens, an object is going to be passed to our function, so we should pick our parameter’s name to be something suitable. So, most of the time you will see that people choose either event or e as the parameter name. Instead of picking parameter names randomly, it is a good idea to pick names which are meaningful. It makes for more readable code both for the programmer and anyone else reading the code. So, event is the name we picked for the parameter of our handleChange function.
When an event happens, an event object is created and is sent to the event handling function. One of the properties contained in the object is target. You can read about it briefly in the links above. So, in the snippet above, the object is assigned to our parameter event. Then, in the function body we use event.target.value; to get the relevant information (the new email in this example) from that object.
The other snippet you mentioned is:
const handleChange = ({target}) => setEmail(target.value);
One of the motivations behind this version is that the event object carries a lot of information, but for this particular function, we really are only interested in the target property contained in that object. So, why not skip intermediate steps and just get at that property immediately. For this we are using something called Destructuring Assignment. You should have a look at this:
The links will explain it better than me, but here is what is happening in this particular snippet.
const handleChange = ({target}) => setEmail(target.value);
The parameter name is supposed to go in between the parentheses ( ) to the left of the arrow. But, we really aren’t interested in the whole object that is going to be assigned to our function’s parameter. So, we basically say why bother naming the parameter? Why should we bother naming our parameter event when we really aren’t interested in the whole object? Instead we just use the curly braces (like so ({ }) => to signify that we are going to be passed in an object but we see no point in giving this object a name. Then, we specify which property(ies) of the object we really care about. In our case, it is the target property contained in the object. So, instead of ({ }) => we now write ({ target }) => This basically finds the target property of the object passed in and assigns it to a variable called target. Within our function body, we can simply use the word target to do whatever we want (in our example we do setEmail(target.value);).
Suppose we wanted to extract the target property from the passed in object but give it a name of our choice (let’s say we want to use the name targ). We could do something like
const handleChange = ({target: targ}) => setEmail(targ.value);
This basically gets the value of the target property of the object passed in and then saves that value to a variable called targ. In our function body, we can now use targ to work with the relevant data.
Have a read of the first link about Destructuring assignment. It has many examples and does a much better job of explaining what is going on.
) below.
) to up-vote the contribution!
