‫Let's add a new feature to our application
‫which is to allow users to sort the items
‫by three different criteria.
‫So basically we will build this select box criteria
‫and then from there the user can choose which
‫of these criteria they want to sort the list by.
‫So something that's very common in most web applications.
‫And so let's now build a very simple version of that.
‫So we will do this here
‫right in the packing list component,
‫because if we were to create a new component just for this,
‫then we would add a little bit
‫of extra work with lifting some more state up.
‫And I want to keep it simple here
‫and not to confuse you even further.
‫And so yeah, it's no problem to just do it right here
‫in the packing list right after this div right here.
‫Or actually let's do it right here
‫after this unordered list.
‫So let's create a div with the class name
‫that I already created called actions,
‫because here we will have that select element
‫and later also a button to clear the entire list.
‫So inside the select element, as always
‫we need the option element,
‫which should have different values.
‫And so then later based on these values here
‫we will calculate the ordered list.
‫So the first one is based on input.
‫And so these are just some strings that we are making
‫up here.
‫So input is basically by the input order.
‫Then well let's write that here first.
‫So sort by the input order.
‫So by the order in which these items were actually placed
‫into the list.
‫Next up we want to sort by description.
‫So sort by description.
‫So basically alphabetically.
‫And then finally, let's also do, which is very nice
‫by the packed status.
‫So sort by packed status.
‫Nice.
‫So there it is.
‫Looks great.
‫And so now let's see how we can actually implement this.
‫So first of all, of course we need to know
‫inside the component, so inside our React application,
‫what the currently selected element here is.
‫And so for that we will once again transform this here
‫into a controlled element.
‫So for that we need our three steps.
‫So first of all, we create a new piece of state.
‫Let's call this one sortBy and setSortBy, useState.
‫And now our default will be the very first one here.
‫So we want that by default, they are sorted by input.
‫And so this input here is exactly this string
‫that we defined here
‫but it could also be description or packed.
‫And so now let's use that state here as the value.
‫So sortBy.
‫And up here, I used packed instead
‫then we should already see that reflected in the UI.
‫So you see that here we now have, by default,
‫sort by packed status
‫because now I used this string.
‫Now React is complaining and that's
‫because we are missing the third part
‫which is to now attach the unchanged event tender
‫so that we can then set the date based
‫on whatever the user selected there.
‫So onChange
‫and this function here will automatically receive the event
‫and then we can setSortBy
‫by using event dot target dot value.
‫So at some point you will get really used
‫to writing this kind
‫of thing here and it will become second nature.
‫So this is like a recipe that we always need to follow
‫and it always works in the exact same way really.
‫So let's see.
‫And yeah, that works nice.
‫And if we check out our component here, then we,
‫first of all need more space,
‫and then you see down here, we now have the sorts by status
‫inside or state inside our component.
‫Great.
‫And so now we can work with this.
‫So how do we now get React?
‫So how do we get our application to display the items here
‫sorted by whatever criteria we selected?
‫Well, basically we will just create a new items
‫which is then sorted by that criteria.
‫So we are not going to manipulate the original items array.
‫That state should stay unchanged.
‫Instead, we will now use again, derived state
‫because sorting one array can of course be computed based
‫on that initial array.
‫That makes total sense, right?
‫So once again, we will not create a new state variable here
‫because that's totally unnecessary.
‫We will simply create a new variable, and here,
‫actually a let variable.
‫So sorted items and we're using a let
‫so that now we can simply do a couple
‫of simple if statements.
‫So if sortBy is equal to input, then this is the default,
‫right?
‫And so then in this case,
‫we can simply say that sorted items should be just equal
‫to the original items.
‫So this is wrong here of course.
‫So again, in this case,
‫the sorted items are just equal to the items themselves.
‫So the ones that we receive as a prop here.
‫And so now of course in the end,
‫we need to use these sorted items and that's right here.
‫So from now on,
‫instead of rendering the original items array
‫we will always render the sorted items.
‫All right.
‫And let's just put some here, socks, a charger.
‫So these are quite easy to write.
‫Yeah, right now only this one here works.
‫So if I do this now,
‫then we get an error because sorted items is then just
‫this empty variable that React doesn't know how to render.
‫So well now I will have to write everything again here.
‫So socks, a shirt, and a charger.
‫All right, and now let's write one if
‫for the other two cases.
‫So if or sort by change is, that's a description,
‫then we will want to sort our items actually.
‫So sortedItems will then become items.
‫And now first we use slice.
‫Because with this we basically take a copy
‫of the array and that's very important
‫because the sort method is a mutating method.
‫And so if we didn't do this
‫then the items would actually get sorted as well.
‫So we don't want that.
‫So we use slice dot sort.
‫And now here I will just write the code because again,
‫I already explained exactly how this method works
‫in the review of JavaScript section.
‫Now in this case, since we want to sort alphabetically,
‫we can use the localCompare method.
‫So we want to take a, which is basically one object
‫of the array, and then we want to take the description
‫of that, which is one of the properties of each object.
‫And then since this is a string, we can call localCompare.
‫And then here we simply pass in another string
‫which is b dot description.
‫All right.
‫So this is going to work, hopefully at least.
‫And then finally, let's also add the code for our last case
‫which is by packed.
‫And so something very similar here
‫sortedItems is going to be equal to items
‫Taking a copy dot sort .
‫And then a and b which are basically two objects
‫of the array which are being compared.
‫And then since we want to order by the packed status
‫which is a bullion,
‫we need to first convert that to a number.
‫So a dot packed minus number b dot packed,
‫and that's it.
‫So let's try this out.
‫So by description, you see that now it's alphabetically
‫so C, S, S,
‫and then finally by the packed status.
‫So right now all of them are unpacked.
‫So let's click, and you see that then it moves to the end.
‫And the same thing right here.
‫Then if I remove it, it will move back here.
‫Great.
‫And of course we also have our default
‫which is the input order,
‫which is also the same that happens whenever we are
‫in the packed status and we have none of them packed in.
‫Great.
‫So that's just amazing.
‫We just implemented this simple feature
‫but also a very common feature simply
‫by using the power of derived state.
‫So again, we didn't create any new piece
‫of state for the sorted items.
‫The only state that we need is the sortBy state.
‫So that React actually has at all times the value
‫of this input field right here.
‫And then based on that, we simply create this derived state
‫of sorted items, which then
‫in the end is what we render onto the user interface.
‫And with this, the only thing that we have left
‫to do is to add this button here to clear the list.
‫And so that's the task of the next video.