Welcome back everybody. Let's get back to learning about React Router. In this lecture, we are going to learn about query parameters, the so-called query strings. They're the parameters that we add to the URL that start with the question mark. So for example, let's change our product page here, this on the right hand side here, to add this order query string, query parameter, that's going to change the order of the product list. So if we say order descending, the list is going to appear in descending order, like the product name, for example, if I put descending, then this guy would be reordered and sort it like, oops, not this, it's descending, right? So it would be, the ABC would be, would be the last one, the DEF the first, BCD the second, and so on. And the same thing would be the opposite of our car, if we set ascending, okay? It'll be the reverse, the list would be reversed. So that's what our goal is, how to access this query parameter from our component. So in order to get this to work, first we got to change a few things in the product page, okay, the products component, we're going to have to extract each of these product names into an object, into a list of product names, so that we may apply this filter. All right, so let's take care of that first before we actually learn how to get the query string value. So let's go to the products.js file, this is where we define the product component, right? So right now we have hard coded product one, two, three, whatever, let's change the name to ABC, BCD and DEF. So let's get back to what it was before here. I think I had ABC was it first, so ABC, DEF and BCD, so ABC, DEF, BCD. So let's get these guys out into a list. So what I'm going to do is I'm going to define the function block explicitly because we could only return, we can't do anything else. So let's add the return value, the return keyword there, like so, and then before we turn, let's create a list, let's say product, product list or whatever you want to call it. So let's make a list and add all these names there. So let's extract this guy followed by DEF followed by BCD. There you go. Let me see this. Now we have a list of products, or ABC, DEF, BCD. Now let's get this to work with this. So before we had the hard coded LIs, now we have to generate an LI for each item in this list. So we're going to do a mapping operation right here. So we're going to say product list, non-map, a product to what? We're going to map that to an LI. That includes the product itself, it's the product name actually. We call it the product. Like so. This is going to work just the way it was working before. Let's make sure there are no errors. Let's go back to the products page and test it out. As you can see now, oops, what's going on? So everything is okay, product, ABC, DEF, BCD. And there's a warning here. Each child in an array or iterator should have a unique key prop. This is from React. Whenever you do a mapping operation, we have to add a key prop to each of these guys. Like here, a key or whatever. It has to be something unique. Usually it's the ID of the product or whatever, but here since we... Let's assume the product name is unique, so I'm just going to put the product as the key just to get rid of the warning. Okay, let's refresh. No problems. Make it a little smaller. There we... Okay, so we have these guys extracted into a list. Now we can do filtering operations if we need. Okay, now let's learn how to access that query parameter. Say we want to order all these product names by descending order. Like so. Right now nothing happens, right? So how do we access this guy? Well, remember we had a console log of the props for the app component? Look here. Let's take a look at these props. There's nothing to params because there's no URL params, but if you look at location, this object here and you look at query, look what we have found. Look what we found here. Descending. So this guy is actually this guy. So it's inside a query. It's inside a location object. All right, so this guy is how we access it. So let's first make an if statement here before we turn. So we got a product list in its original form, but if the props.location, right? Location.query.order, right? If this guy is descending, then we are going to do what? We're going to take the product list and we are going to sort it and reverse. Like so that it appears in descending order, right? Right now it's not sorted because ABC is coming right before Df, but Df should be the last. So we have to first sort it. So let's do product list.sort. Then after sorting it, we can reverse. Notice that this sort of operation JavaScript, this function is going to modify the original object. So be aware of that. The same thing for reverse. So both of these operations are in place and will change the original. Okay, now let's save it. I forgot to detail in the if statement if you already know. I'm going to talk about it later. So you see now it's sorted, descending. Product ABC is the last and Df at first with BCD in the middle. So actually this is working. It checks the props.location.query.order to see if it's descending. Now let's remove this order, this query string. Let's see what happens. So we have ABCD, FBCD. So let's take a look at the props here. We have prams, we have location, and the query does nothing query. So the moment you try to access .order, this guy is going to be what? Undefined. So that's why this condition is failing. Which is actually what we want. We don't want to do anything if that fails. So that's actually okay. So no problems there. Now if you do descending again, it orders it and descending order. Now if you do ascending, how do we do it? If we want to do it ascending. Now it's wrong, right? Because it didn't do anything. Df should be less. Now I want to see you do it. Now let's add an elseif here. And like in the same way, and just sort the product list. You don't need to reverse it because it's ascending. Let's hear you do it. Let's see you do it. So how did it go? So we add an elseif, props location, query.order. If this guy is ascending, then we just need what? Sort it. Sort the product list and that's it. Save it. Now let's test it out. Sending ABC, BCD, and DF, correct. Let's remove the query string. Let's put nothing there. Now it's back to its original form. Let's put descending. Now it's descending. So everything is working now. So great. So that's how we access query strings using React Router. So let's do a review. So what did we do here? So first we had to extract each product name into a list so that we may apply the filter based on the query string. So to access the query string we use props.location.query.name of the query parameter. That gives you the value that was typed in the URL here. In this case, order and the value is ascending. So we use that to determine whether we want to sort the list in descending or ascending order. All right so hope you liked this video. Please click the like button. And don't forget to subscribe if you're not already my subscriber. Thank you so much for watching and until the next time. Bye!