Beautiful.
And once we're done setting up our component, the former select component, let's set up the global
handle change function, which essentially will work every time we update one of the inputs.
So as we change something in the input, we'll also automatically update each state.
Now, before we continue with me, just mention that throughout the video, we will rely heavily on
the fact that in your script, we can update object keys dynamically.
And if you're not familiar with that, please reference this video in my address nuggets because I don't
want to be too annoying and repeat stuff too many times.
So eventually, in our reducer, we'll update the state of Iowa in such a way where there's going to
be a name value and pass in the actual value of the property again.
If you're not familiar with this approach, please watch the video that I provided over here and we
will start with actions we want to create and will change action event in the app context.
We'll create an oil change function, and as of this point, I'm not going to mention import export
because at this point, I think that we're all on the same page where, yes, every time we create the
action, we do want to import it in the app context as well as the producer.
And that in the app context, we want to set up the function and we'll change.
That is looking for two things looking for name and value.
And yes, we'll set it up as an object.
So we're expecting an object with two properties and then we'll dispatch this back channel change.
And as far as the payload, well, pass both things to the traditional will say name and value.
We export a function, so add it here and the value and then notice over here where we have handled
job input.
So we'll get it in.
The AJAB will invoke the function every time we update the input.
And as far as the value is now, it's going to be name equals, event target, not name or you can simply
use the variable that we currently over there have.
And the same goes for value.
So from the job, we passed both of these things over here and then in the producer, like I said,
we'll dynamically update that value.
Now, why do we have this dynamic approach?
Because we need to keep in mind that names will change for the input.
But with this setup, we'll always update the correct property, so use the property name in order to
access the property.
And then when it comes to value, while we'll just set it equal to it.
Again, if you're not familiar with dynamic object properties, please watch the video first, because
in there I cover everything in much greater detail.
So let's get cracking and guess let's go to actions first.
We want to create our annual change, so my copy and paste, I mean, let me make a little bit of room.
So a mission like this one, I'll delete.
And let's just say handle and then underscore change.
So that's going to be our global one one.
We want to go to app context.
And I think I'm going to do it right away in the reducer as well.
Just so I don't forget or handle change.
Let's copy this one in the reducer.
OK, so OK, grab the handle change.
Let's say it, and then we'll set up our function.
Now it doesn't really matter where we place it, so I'm just going to place it after the update user.
So all the way here, I'm going to go with my concert and I'm looking for a handle.
Change function in here, I'm going to be expecting an object with two properties, value and a name,
and that as far as the functionality.
Well, let's invoke that dispatch.
Let's say dispatch, we want to pass in our pipe and type in this case is going to be handled change.
Now we also want to pass in the payload correct payload.
And now let's set up the name and a value.
Now, if you want to console.log it, you can definitely do so.
I'll just leave it the way it is, but I do want to pass it down, so and I'll change.
And now let's navigate to the job.
Let's grab the function.
So right after this one will go with another change and then let's keep on scrolling and where we have
the handle job input instead of logging, we'll go with handle.
And we're going to set up the change one.
And as far as the powers for both of them, well, we have name and value.
And the last step is setting up that reducer where again, first we'll import handle change.
Yep, we have that.
And then let's keep on scrolling.
I mean, I can probably copy one of these conditions just so it can speed up the if action type and
are looking for and all change.
That's the action name we will return the state as it is, but as far as the update.
Well, this is the case where I'm going to go with action dot payload name.
So this will dynamically access the property based on the name.
And yes, I do want to set up the value.
So I'm going to go with action, payload and value.
So once we save and navigate back to the browser, if I take a look at the components, what I should
notice that each and every time we do something here in the inputs, we're actually updating the state
as well.
So let me go to my provider.
And more specifically, I'm looking for the position company and all that, and I notice the moment
I will type say position front, then what do you think is going to happen?
So let's try it out.
I'm going to go with front end and check it out.
Now the position, property value is the front end.
So we're going to go here with a Netflix.
You'll also see the same deal, and now I can change my value for job location as well.
So keep in mind.
Again, we're talking about the default one that is going to be the user's location.
But once I refresh, for example, by default, it's going to be here in Mexico.
But if I want to change it, if let's say I'm going to go with Brazil, then yes, the state value will
match that.
Exactly.
So let me open this one up and we have over here, Brazil.
And the same is going to work with Select where we can pick any of these values, and then you'll notice
that the actual value changes as well in the state.
And then once I add everything as far as the inputs.
So if we go back here with front end and then we're going to go to Netflix once we submit, we should
see in the console, great job because we are providing all the values that we have the condition for.
And with this in place now, we have a global annual change function that pretty much handles every
time we update the input in the add job page.