‫And now let's learn how to use the second way
‫of storing state in the URL, which is the Query string,
‫and so in this lecture, I want to do exactly
‫what I showed you in that slide two lectures ago.
‫So where we added the position
‫of the current city right here to the URL as a Query string.
‫So adding that data to the Query string
‫is actually really, really easy.
‫All we have to do is to edit here to the path
‫that the user will go to when they click on this link.
‫So here we are in the city item component
‫which gets access to the current city.
‫So basically we are
‫right here in each of these components,
‫and so remember
‫that each of them gets also access to a position object.
‫So let's lock that to the console,
‫and so here they are.
‫So here we have like each of these position objects
‫for each of the cities.
‫So it contains the latitude and the longitude,
‫and so let's now add the latitude to our string.
‫So here we are building this URL.
‫So we already have the ID,
‫and now we need to question mark
‫and then the name of the state variable
‫that we want to share, basically,
‫or we can also just call this another parameter,
‫but a parameter of the Query string.
‫So let's call this one, "lat" for latitude, then equal,
‫and then finally, let's add the dynamic data.
‫So
‫"position.lat".
‫All right,
‫and so now when we click here on one of these links
‫then
‫that moved right here into the URL,
‫and it's important that it always follows this format.
‫So first, the regular URL, then the question mark,
‫and then the variable name equal, and then the data itself.
‫And of course this would've worked on a non-dynamic route,
‫so a route without this ID.
‫So for example, like this, right?
‫So it doesn't have to be a URL with a Param in there.
‫But anyway, we can add more.
‫So for that, we just use the "&" symbol
‫and then we can just define another one.
‫So let's go for the longitude here,
‫and so
‫"position.lng"
‫and now we don't need to test this
‫but I still need to click here now again
‫so that I can show you that the state
‫that we had here inside our application,
‫was now transferred to the URL.
‫So we have both the latitude and the longitude
‫right now in this globally accessible URL,
‫and so it is as if this data is now global state,
‫which we can access from everywhere.
‫So that includes, for example here, this map component.
‫So let's now move to this map component
‫which we already created earlier,
‫and so in here, let's now try to read
‫this latitude and longitude data from the URL.
‫And so for that, we use the "useSearchParams" custom hook
‫that React Router gives us.
‫So here it is, "useSearchParams"
‫and this one is a bit similar to React use data hook,
‫so it returns an array
‫which has basically the current state
‫which we usually call the "SearchParams"
‫and then second, we get a function with which
‫we can set the SearchParams
‫so we can also update the SearchParams in this way.
‫Equals this.
‫Now okay?
‫And now let's try to store first the latitude
‫into this lat variable,
‫because this data is actually not directly accessible
‫on the SearchParams,
‫so it's not like an object that gives us this data here.
‫Instead it's an object onto which we need to now call
‫the get method.
‫So get, and then the name of the variable itself.
‫So lat, which is exactly this name right here.
‫So this needs to match this.
‫Okay, and then let's do the same for the longitude.
‫So "=searchParams.get"
‫"lng"
‫and so
‫here, let's now first display an H1,
‫so that we can actually see something,
‫and then here, let's say position,
‫and then the latitude
‫and the longitude.
‫Give it a save, and there it is.
‫So this is exactly the data that we have here in our URL,
‫and so basically with this,
‫by clicking on one of these links in the list,
‫we successfully share the state,
‫so in this case the position state
‫with our entire application,
‫so at every component that wants to access it.
‫So now I clicked on this one
‫and then the position changed here to this one,
‫and we can of course now use this
‫in many different components.
‫So let's grab this and move here into the city component,
‫and let's do the same thing here.
‫So of course now we need to include this again.
‫So "useSearchParams"
‫and so this then edited to the imports, exactly,
‫and then let's return just something else here.
‫So doing the same thing, position, lng,
‫and then the latitude.
‫Now here, React is not happy,
‫so let's do a fragment here in this case.
‫So now this is really small,
‫but the point is that the data is actually exactly the same.
‫Not the same order, but
‫well that's
‫not really that important, but once again,
‫we were now able to pass this data here
‫into all kinds of different components
‫without having to store it
‫anywhere inside a React application.
‫So we didn't have to create any new piece of state
‫but instead we just stored it in the URL
‫and then made it accessible everywhere,
‫and so this is going to be really helpful
‫here in the future to move the map
‫to exactly the position of the city that was loaded here.
‫So remember that we got the state here into the URL
‫in the first place by passing it here into the link,
‫so into the two prop of the link.
‫So this is how we create a Query string.
‫But we can also then update the Query string
‫as I mentioned before, using this setSearchParam functions.
‫So let's do that here as well.
‫So I will just create a temporary button here.
‫Let's say change position with an on click handler,
‫and so here, let's just create a quick function
‫because this is just to demonstrate.
‫So here we can now say setSearchParams,
‫and then here we need to actually pass in an object
‫with the entire new Query string.
‫So let's say the latitude should be 23
‫and the longitude should be,
‫let's say 50.
‫All right, so here we don't use the set function
‫as you might expect but instead we now need to pass in
‫a brand new object here,
‫and so let's see what happens,
‫and there we go.
‫And notice how actually this state has updated everywhere,
‫and so that is really powerful.
‫So it changed not only of course in the URL,
‫but also everywhere in the application
‫where this data is read.
‫So it changed here to 23, 50, and the same thing here,
‫even though it's really small,
‫but notice how it did change really everywhere.
‫Now, okay, and so now with all this in place
‫so with both the Params and the Query string now working,
‫we can demonstrate one of the great advantages
‫of having all the state stored in the URL
‫that we talked about earlier,
‫which is that now we can just take this URL
‫and then for example, share it with someone.
‫So you can now copy this and then send it
‫in some WhatsApp message or something like that,
‫and then the other person can open up their browser,
‫paste that URL there, open it up,
‫and then they will see the page at exactly the same state.
‫So we are in the same city here
‫with the same position being displayed here and in a map.
‫So this app looks exactly like this one,
‫and so once again, that's because of the power
‫of storing all the state that is relevant here
‫right in the URL.
‫And so with this, we made the application more shareable
‫and also bookmarkable, if that's even a word.
‫But anyway, as you just saw throughout these two lectures,
‫using Params and Query strings really are amazing techniques
‫that you are going to start using all the time
‫once you start using React Router on your own.