Awesome job.
We've got some buttons, and as we're clicking on them, we change our view, I think now it's a great
time to work on the select and there are few steps to get the select working where we can support our
product on.
The first one will be setting up the controlled input.
So I would want to have some kind of value in the state.
And then as I'm clicking on the select, of course I'll change that value.
And the second thing is going to be setting up the user that runs every time we change state value.
And then, of course, we'll sort our products, which of course at the moment are all our products.
But eventually it will depend on the filters as well.
So let's start by setting up that state value so it's not going to be in a field producer, but in the
filter context, I'm going to start by setting up a value with the name of sort.
Now, if you name it differently, just keep in mind to use the same name and now I would need to go
with some kind of default value and the default value needs to match to one of the options to my case.
The options that I have are price, lowest price, highest naming names.
So just make sure that if you're going with different value, it matches one of the value values in
the option element.
So in my case, I'm going to go with price lowest.
So just set it up as price and then hyphen.
And then lost, so that's going to be my thought.
Now, remember, for controlled input, there were two things.
First of all, there was a state value and the second one was the function that we run every time there's
a change in the input.
Correct.
So in this case, I'm going to name this update and sort and I'm going to be looking for that event
object.
So in this case, it's going to be extremely important.
And for the time being, I would just want to set up two things name which is going to be equal to Event
Target and the name, because remember, once we add this update sort of on our select.
And one target points to the select input, and I can get a few things out of it and Mike, I'm going
to be looking for the name, which is going to be short, and then the second thing is going to be the
value.
So what is the actual value, the option that the user is using?
So that will be equal to cost and then value and then this is going to be equal to event target.
And of course, it is sitting in the value.
Now, we need to parse this down.
So say update sort as well as the sort.
But of course, sort we are already passing in the state and then in sort of course, we would want
to access both of them.
So let's do that.
I'm just going to make sure that I access sort of that sort.
So let's grow up.
We're looking for sort of an update sort every time we're changing the value and then we'll scroll down
again.
And in this case, where we have the select first of all, as far as the value, I'll pass in the sort.
So this is the value that is coming from the state, which in my case, again, is going to be priced
lower.
Correct.
So set it equal to sort and then on change will be equal to my update and then sort.
And for now I just see what is the result so I'm can navigate the bigger screen.
And remember, we are logging some values here.
So once you click check it out, there's going to be two things.
By the way, I don't know why it didn't happen.
Maybe there's some kind of mess up here.
And again, nothing is happening.
That's interesting to update sort of on the select.
I grabbed it over here.
Let me just double check.
Maybe my name was incorrect and of course, I'm not so long and that's why nothing's happening.
So name and value.
My apologies.
I said I'm going to cancel log and of course I forgot about it.
So I have my price, which at the moment is lowest.
But then check it out.
Once you click, you get two values back, you get sort and then you get the price highest.
So this is the value, meaning this is what the user selected and this is the name of the input.
Now, I have to be honest with you in this case.
If we take a look at the sort, it doesn't really matter, so the name here is Sword, but since there's
only one property in my state, so the name here is, of course, short, it doesn't matter.
I know that.
I'm just looking for the value.
Now, the reason why I showed you this one, because later when we work with filters, it is going to
matter because there's going to be multiple properties in this case.
We only have one select and the value in the state is just stored.
But you'll see the filters where it is extremely important that you have the same name as you have in
the state.
In this case, though, honestly, we only care about the value, but I will leave this one and I'll
say just for demonstration or something along those lines for demonstration for them on.
Tradition here, and I'll come this out, so yes, I said that we need to have a name, but this was
just to showcase what is going to be the name, because later with filters, it's going to be extremely
important.
In this case, we only care about the value.
And now, of course, every time I do something with my select.
I would want to update my state, correct?
I would want to change this value resort because at the moment it is hard coded as priceless.
And not to do that, we would need to dispatch an action.
Correct.
So that's why in the filter context will say that there's going to be an action by the name of update
sort.
So we just go with dispatch.
And then, of course, this action is already imported.
I'm not going to do the whole song and dance where we're getting from.
Hopefully it is already clear by now.
So we have variable coming from the actions and the name is update and then short.
Now, as far as the payload, I would want to pass in the value.
So whatever option I have selected, I would want to pass this in.
Now, again, when I say value, we need to understand that each option has the value attribute and
here I have some kind of tax and in order to access it, I'm using event target and then that value.
So whatever string I'm getting back, I would want to pass it in as a payload.
So say payload is equal to the value.
And now of course in my producer, I would want to handle that because at the moment, of course, it
will click.
We should get a big fat error because we're not handling that in our producer.
So let's do that.
We're going to navigate to the producer.
And instead of the producer, of course, we would want to check for that particular action.
I have one for Greenview, one for Lesterville.
Awesome.
And now I'd want one for updates state.
So then we go with action and then type is equal to update.
And so again, we're importing that variable from the actions.
And then of course, I would want to change the state value of the sort of state value depending on
what is the string that is coming back by default is going to be price lowest.
But then as we're clicking on input, of course it will change.
So in here we go return again, we return all the properties untouched in the state, and then we just
change the sort.
And so it will be equal to our action and then payload.
So now of course, I can navigate the big screen because it's going to be easier to see in my components.
I have my filter one.
And I have my producer and notice here, by default, this is price lowest and then, of course, as
I'm clicking n now, this is going to be priced higher than we'll have A to Z and Z to.