 Hi, this is Christian. In this video, you'll learn how to access URL parameters and react. So here is the site that we've been building. The idea is that when you click on the Edit button, we go in to launch a component called Edit. So it matches in the URL here. We pass in the ID of that record to this component. And as you can see, idea one, and we're going to use that ID and search the entire list of data, finding that ID matching this record. We're going to pull this record using its index, and then we're going to pre-populate the form with the data. So that's the idea. So here is the demo app we want to use for this illustration. On the right side is the output of this app. I have two components. One is called Update. This is going to be a function component. The second is called Details. This is a class component. So I want to show you because how you access this ID up here is a little bit different from between function component and the class component. So that's what I have here. Down here is just the current state of this data. And my data is just really a very simple object that has the ID name and the type here, okay? So let's look at the app first. This is the root component. I'm using class component here. I get my patch data here. I have a function to update my pet if I need to do that. This function will be passed down to my child components like the update and details, for example. And so down here is where the router is. Right, my routes. One pattern is right here to update slash the colon ID. This is the ID field I need to access in the URL. This component is going to the details URL. And then I pass in a PID instead. So I mean whatever you call it doesn't really matter. I just put two different IDs here. So it's not to mislead you that you must use ID. It's just a parameter. It's a little bit hard to see. So I'm going to move this to the left. Do a shift tab or move my code to the far left to give us some room. So when I go to this URL, I'm going to launch the update. I pass to the update component the pets data and the function called update pet. The same thing for the other one as well. But first let's look at the update component. It's a stateless component because it's a function component. Okay, so how to access the URL parameters is by setting an ID equal to a hook or API called useParams. It's a function. So you can call it like that. Okay, so this function here. This params here is a part of the reacted router. So you need to import that in here. Use params. This is a hook. A hook is really just a program or API that intercepts or lets you hook into the react state or react lifecycle. Okay, because this is a function component. It has no access to the state unless you have another program to do that. And this hook here does that for you. Now this function or this API what you will get is a, it's an object that looks something like this. So I have the ID field and whatever ID I pass in URL will be set right here. If I have another parameter called maybe category, then you know that could also be assigned in here as well whatever category is. And then you can access this, you know, probably by using the dot notation like this if I want to, which is fine. Okay, and just remember that I'm using the ID here. The ID here is, as you can see, it's an integer. Be very careful about this one here. You always want to make sure that you parse this to be an integer. Otherwise, this is always going to be a string and it won't work. So I want to parse it first as an int. You wrap it into the parse int function and that will not be an integer. Okay, the next thing is I want to find the index where this ID is found. So if it's a five, this index zero, six index of one, and then pull this record out, right? That's the idea. So I'm going to do one step at a time to show you how it works. Look for the index inside this props dot pets. And then there's a function called find index. And to this function here, it's a call by function inside here. So for every pet, okay, return the record, the index that has a matching ID equals to this ID here. That's what it does, right? If this is a match return that index, and then put it here. And once I found it, then I can set a pet object to the props of the pets at that index like that, right? You do that, we can also do like that index. It doesn't matter which way you do it, it's fine. But we'll use the error right here. It's probably easier to see it that way. So once I found the pet, and they can go ahead and then change these to the actual pet that ID data, the actual dynamic data here, that name, and then here will be pet dot type. Okay, I think that is it. Let's give it a try and see if it works. Save that, and have an error here to fail to compile. User parameter is not, oh, it should be use, not user, okay, sorry. Should be use parameters, not user. Okay, so here we go, go Milo, and we got the Milo information here. Let's go back and try all this. As you can see, it's working beautifully, and then buck. Okay, so that's the one you want to use for the function component. Now let's take a look at the class component. I'm going to copy this over, over here, and just paste it right under the render function here, okay? And I also want to update my H3, it's the same thing, so just replace this record here. And then what else do I need? This use parameter. So I want to show you that this does not work in here, is all I'm trying to do here. Okay, so if I save this, and I have to do some modifications in here, I will have this as a this dot props, right? So this dot props, this will be this dot props here. And then I think that's it, yeah. Okay, so let's give it a test drive. And over here, you can see over here, it says React hook use programs cannot be used or called in the class component. So you cannot use this hook here. But because it's a class component, you have access to the props and the state, all those information here built into the route. So what you need to do for class component is the following. Okay, so let's take a look at the apps and how we can change this. Now, when we pass the data to the child component, we can't do it this way. What we need to do is to modify this route and call a property called render. And this render will pass this under a function. So this function can be created outside. You can put it inside here if you want, but sometimes we're confusing. So I'm going to create a function called details. And then we'll assign that as the way you do appear, like update pet assigned to a function called update pet. And I'm going to create this function right inside the render function here. Okay, so not in the net outside but inside here. And it has to be an arrow function in order for this to work. So let's call it again details equals a pass in the props. This is really just a function component rate really a passing here. And then we're going to move this details component inside here and make sure that you return this. Okay, return this component. And I have to pass it here a this props. So you do this by using this spread operator I do right here at the end here. So it code the braces and then da da da props. That's how you pass all the parameters to this props object. Okay, and then now you see that this is now a little bit different from this one here, right? It's the empty component. You don't mess any child components here. You go through the render function right here. Okay, let's save this for now and go back to the details. And let's fix this. Now I'll leave this as is you can kind of see the notes here. What do another one here call that ID is equal to this time I'm going to get the ID from the this dot props dot match dot prams dot ID. It's a long one. Okay, this prams here. This whole thing here is similar to this guy right here. So you can say that this is the hook that access this part, same idea. Okay, so I can access the ID here if I have a category will be dot category dot prize, whatever. Okay, again, just make sure I parse it. So I can parse it. And it must be an integer in order for this to work. So save that. And you can see that I think the error goes away and everything here remains the same. Let's give it a try. So I have an error is this ID cannot be found. Let's see why. Okay, yeah, one thing I forget is member here. And our app up up here I pass in the detail with a PID instead of the ID field. Okay, so I did it on purpose just make sure that you're able to see a different variable here. Therefore I must change this to say prams dot PID. Okay, so here we go. And there it is. Right, let's go back here. Milo is my information here, go back and then Otis is Otis and then buck. And make sure the other one's still working too. All right, that's how you access parameters. Using a class component, you must go through props that match that params that a PID. And then the function, you use the hook called use params function. And I did here I'm using, you know, dot ID, whatever that it is. Of course, you also use a destructuring so you can destructure this directly to the ID here. What I'm saying is something like this, let ID equals and then use params like that. Okay, it will pull this ID here, put it inside the curly base over here. Okay, if you do this way, just make sure you don't wrap this inside the parse and it will be incorrect. Okay, after you assign the ID here and then you have to parse it. So if they do it separately, we can parse it in here if you want. So that means that to go here and say ID is equal to parse int and then ID to make this work. As you can see if I save it now and I try and as you can see it still works just like before. Right, same thing right here too. You can do the same thing, same idea. But don't attach the PID here. It'll be just you move the PID over here on the right side. Okay, so I think that's all I wanted to show you and I'm sure you know how to do the update. Just pass the data here up to the app component and then you do the update up here and update your state. Any questions, you know, please feel free to let me know or post a comment. I'd be more happy to reply. Any suggestions at all, please always welcome. Thanks and I'll see you guys in the next video.