useParams in react-router-dom

There is a big issue with a "PATCH" request for beginner developers (at least in my beginner perspective :) ).
I was working on an app that you can add a dog to the DB and also update it ("PATCH"), To grab the id from that specific "dog" and update it gave me some trouble, I tried to pass hooks as props in all kinds of ways but with no luck.

I didn’t know how strong and useful "params" can be, But when I looked for other ways to get the id from the specific "dog" I saw that there is this beautiful "react-router-dom" hook called "useParams" that makes things pretty simple.

So instead of passing hooks from one component to another component to another component (which didn’t even work) I used the "useParams" method like this...

The steps

In the parent component where i render the "EditDog" component i gave it a RESTful route:

Then I import "useParam" hook from "react-router-dom":

Then I grabbed only the :id from the params and just passed it in the Fetch request:

And there you go, A simple way to grab the id param from the object, It helped me a lot compare the other ways I tried to grab the id and I hope it will help you to.

Happy coding :)