Welcome back.
In this video, let's see how we can make this or use params.
In this video.
Let's see how we can make use of use param cook from react router dom.
So here we go.
Remember we have a component that render a specific product and that is this one.
So here we need to find a way to render this component.
So here we go inside the app, let's bring in the individual component that is the product, meaning
a single product.
So let's save it again and let's come back here and then let's require it as product.
So here you go.
Since this one is going to render a dynamic data, we need to pass in what is called an ID I or make
this one product and this I'm going to be forward slash some ID.
So how can we have access of this ID in our component of products and which is this one?
And for this one, I'm done with the implementation.
So let me take you through it.
I required the use param hook from React Brown to Don and this one holds all the params from the new
URL.
And for us I use what is called ID.
So I went ahead to structure that from the use param hook.
So let me remove this one from here and show you step by step.
So let me comment.
This one otherwise is going to yield on US columns and I call this one as params and it's equal to the
use params hook.
So if I console.log the params, let's see what we are going to get.
So inside the product lists, this where we want to navigate.
So here I used normal a tab for the navigation.
So let's require the right link tag for react blocked Adam and that is the link.
Let's use the link tag and then here let's remove the attack and replace it with a link as we did before.
And for this one you're going to be two and here is a you are forced large some ID great.
So here if I go to the page this one and I refresh it and I click on any of this product, you can see
that I go to here.
So if I check my console, you can see that I have an object with ID to the ID is what I specify inside
my route.
So if I make use of whatever.
So let's see.
I can see that, I see whatever.
But ideally we use what is called ID.
So inside my component I can structure that as we did before.
So here is going to be as ID, which is equal to use params as that.
So here if I console.log, the ID is going to be the same value inside the URL.
If I refresh it, you can see I have two.
So here I can take this value and then make a request or find a product by that particular ID.
And this is my product array.
So let me bring back my functionality here and here we go.
So I have to move the function to find a product.
So here let's bring it back by making use of cons and then here is going to be a single product equal
to the product array.
And for this we are going to use automated and for this we pass in a callback function, we have access
to the individual product and if the ID of the product is equal to the ID from the params, we are going
to return a new array.
But here we want to find a single value.
So here is going to be fine but not filter great.
So if we consider that log the products, let's see what we are going to get.
We are going to see some work thing here.
Check it out where I got some error.
Meaning that name is not defined because there is no value inside this.
So let's comment this one and now let's check you can see that.
Let me clear everything here and let me refresh and you can see I got undefined on line number ten on
product components, line number ten meaning that there is no product found.
Well, what is a problem?
They take note here is that always the params that you go from the you are.
Strange, but the idea of the product is a number.
Check it out.
You see, we have a number here.
So what we need to do is that we can change this one to double code or single code of all the product
that is first option.
Or we can convert the ID to a number by using what is called number method and pass in the number.
But we have the short way by adding plus to it.
If I add plus meaning that I'm converting the string to a number now I can bring back my component and
now let's save it.
And now you can see that I have back my product.
If I go to all product and I want to find the iPhone Pro and click on that, I have that if I go to
product and I click on MacBook Pro or MacBook Air and see that I have that.
So guys here and the complete solution and I react to Don as we move on, we are going to build a couple
of application that is expenses, income tracker application using stock and then a complete authentication
system using main stock.
All right.
So let's get rocking, guys.