All language subtitles for 012 Alternative Creating A Shared Handler Function_en

Now before we'll dive deeper

into state, React events,

and what we can do with all these things,

I wanna take a closer look

at these change handler functions,

because at the moment in this demo application

I have three change handler functions.

One for the title, one for the amount, and one for the date.

Which makes sense since I have these three state slices

and these three main inputs.

And of course, using this approach is also absolutely fine.

There's nothing wrong

with having these different change handler functions,

but I wanna show you an alternative approach

which you also could consider using.

Instead of having all these

separate change handler functions,

you could try to create one shared change handler function.

For that, we could create a new function

which could be named inputChangeHandler.

And here I'll also create an arrow function,

but I'll now not accept the event argument.

But instead here we could accept some identifier,

though this name is up to you because it's your function,

hence your parameter name.

And then maybe a value.

And my idea is that I can use this one single function

for all my inputs, for all those onChange events.

And then we can simply identify the different inputs

with help of this identifier

and update the correct state slice

based on the identifier that was passed to this function

with that value.

So in here we could, for example, check if identifier

is equal to, let's say, title.

And if that's the case, we update the title state

by calling setEnteredTitle

and setting this equal to the new value.

Else if it's not title, we could check if the identifier

is maybe equal to the date here, so if it's equal to date,

and then update the EnteredDate with the value.

And else it must be the amount,

and therefore we could then call setEnteredAmount

and set as equal to value.

So with that, I am calling

all these state updating functions,

but I'm now doing this

all in one shared change handler function.

Now we can't use this change handler function

as a input for onChange now though.

That won't work because as you learned,

React will, in the end, call this function for us

and will pass such an event object to it

and it will definitely not pass an identifier

and value to it.

We're not going to get those data points

when React calls this function.

But we need them for this function to work correctly.

Now what we can do here to work around this,

is we can go to this onChange function

and instead of passing a pointer to inputChangeHandler

as a value to onChange,

we can pass an arrow function to it.

A new anonymous arrow function

which we create down there where we need it.

With that, it's this arrow function that will be called

by React whenever this input changes.

Therefore this arrow function will receive

this event object.

And in the body of this arrow function

we can now manually execute inputChangeHandler.

So execute this function here, which I just added.

We manually execute it by adding parentheses.

And now this code in here will not be executed

when this line of code here is parsed,

but instead this here will only be executed

when this arrow function here is executed.

And that will only be the case

when this change event occurs.

But now that we have this wrapper arrow function here

we have full control

over how inputChangeHandler will be executed.

And we can therefore now pass our identifier

as a first argument.

So for example, title here,

so that for this title input here,

we pass title as an identifier,

so that we make it into this if branch here.

And as a second argument, we pass the value that changed.

So in this case here, event.target.value,

just as before, but now in this arrow function.

And with that, we as a developer,

control how this function here will be called

by wrapping it in such a arrow function,

which is the actual function that's passed

as a value to the onChange prop.

But then we control how this inner function

will be executed when the change event occurs,

and we can then use this generic handler function

because now we could use this same code here,

or almost the same code,

on the amount input value, for example,

and pass amount as an identifier.

But other than that, it's the same code

and the function that's being executed is always the same.

And this approach simply is an alternative

to having multiple specialized handler functions.

As mentioned, there's nothing wrong

with having these specialized handler functions,

but as an alternative,

you could consider using such shared functions.

With that, I'll get rid of that though

and move back to the code we had before

with the titleChangeHandler

and the amountChangeHandler here.

But I definitely wanted to share this alternative

since it is something you might see in some React projects.

And since it is something you might want to use yourself

in your React projects.