1 00:00:07,280 --> 00:00:08,330 Welcome back. 2 00:00:08,600 --> 00:00:13,340 In this video, let's see how we can make this or use params. 3 00:00:14,630 --> 00:00:15,650 In this video. 4 00:00:15,650 --> 00:00:21,790 Let's see how we can make use of use param cook from react router dom. 5 00:00:21,800 --> 00:00:24,020 So here we go. 6 00:00:24,440 --> 00:00:31,160 Remember we have a component that render a specific product and that is this one. 7 00:00:31,520 --> 00:00:36,950 So here we need to find a way to render this component. 8 00:00:36,950 --> 00:00:44,780 So here we go inside the app, let's bring in the individual component that is the product, meaning 9 00:00:44,780 --> 00:00:46,160 a single product. 10 00:00:46,340 --> 00:00:53,720 So let's save it again and let's come back here and then let's require it as product. 11 00:00:53,900 --> 00:00:55,400 So here you go. 12 00:00:55,730 --> 00:01:02,960 Since this one is going to render a dynamic data, we need to pass in what is called an ID I or make 13 00:01:02,960 --> 00:01:07,250 this one product and this I'm going to be forward slash some ID. 14 00:01:07,340 --> 00:01:14,780 So how can we have access of this ID in our component of products and which is this one? 15 00:01:15,200 --> 00:01:17,990 And for this one, I'm done with the implementation. 16 00:01:17,990 --> 00:01:19,430 So let me take you through it. 17 00:01:19,670 --> 00:01:29,420 I required the use param hook from React Brown to Don and this one holds all the params from the new 18 00:01:29,420 --> 00:01:30,170 URL. 19 00:01:30,260 --> 00:01:33,230 And for us I use what is called ID. 20 00:01:33,230 --> 00:01:38,090 So I went ahead to structure that from the use param hook. 21 00:01:38,300 --> 00:01:42,290 So let me remove this one from here and show you step by step. 22 00:01:42,800 --> 00:01:43,640 So let me comment. 23 00:01:43,640 --> 00:01:51,650 This one otherwise is going to yield on US columns and I call this one as params and it's equal to the 24 00:01:51,650 --> 00:01:53,020 use params hook. 25 00:01:53,330 --> 00:01:59,480 So if I console.log the params, let's see what we are going to get. 26 00:01:59,840 --> 00:02:04,580 So inside the product lists, this where we want to navigate. 27 00:02:04,970 --> 00:02:09,320 So here I used normal a tab for the navigation. 28 00:02:09,320 --> 00:02:17,300 So let's require the right link tag for react blocked Adam and that is the link. 29 00:02:18,320 --> 00:02:28,040 Let's use the link tag and then here let's remove the attack and replace it with a link as we did before. 30 00:02:28,250 --> 00:02:35,560 And for this one you're going to be two and here is a you are forced large some ID great. 31 00:02:35,660 --> 00:02:44,480 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 32 00:02:44,480 --> 00:02:46,190 that I go to here. 33 00:02:46,280 --> 00:02:55,610 So if I check my console, you can see that I have an object with ID to the ID is what I specify inside 34 00:02:55,610 --> 00:02:56,420 my route. 35 00:02:56,420 --> 00:02:59,690 So if I make use of whatever. 36 00:03:01,160 --> 00:03:02,180 So let's see. 37 00:03:02,180 --> 00:03:05,060 I can see that, I see whatever. 38 00:03:05,150 --> 00:03:08,480 But ideally we use what is called ID. 39 00:03:08,630 --> 00:03:13,940 So inside my component I can structure that as we did before. 40 00:03:14,450 --> 00:03:23,840 So here is going to be as ID, which is equal to use params as that. 41 00:03:24,050 --> 00:03:31,640 So here if I console.log, the ID is going to be the same value inside the URL. 42 00:03:31,700 --> 00:03:35,060 If I refresh it, you can see I have two. 43 00:03:35,330 --> 00:03:43,100 So here I can take this value and then make a request or find a product by that particular ID. 44 00:03:43,100 --> 00:03:45,470 And this is my product array. 45 00:03:45,590 --> 00:03:50,600 So let me bring back my functionality here and here we go. 46 00:03:50,900 --> 00:03:54,950 So I have to move the function to find a product. 47 00:03:55,250 --> 00:04:02,630 So here let's bring it back by making use of cons and then here is going to be a single product equal 48 00:04:02,630 --> 00:04:04,970 to the product array. 49 00:04:04,970 --> 00:04:12,050 And for this we are going to use automated and for this we pass in a callback function, we have access 50 00:04:12,050 --> 00:04:21,800 to the individual product and if the ID of the product is equal to the ID from the params, we are going 51 00:04:21,800 --> 00:04:23,450 to return a new array. 52 00:04:23,570 --> 00:04:26,360 But here we want to find a single value. 53 00:04:26,360 --> 00:04:30,980 So here is going to be fine but not filter great. 54 00:04:30,980 --> 00:04:36,470 So if we consider that log the products, let's see what we are going to get. 55 00:04:36,740 --> 00:04:38,810 We are going to see some work thing here. 56 00:04:39,080 --> 00:04:41,180 Check it out where I got some error. 57 00:04:41,210 --> 00:04:46,850 Meaning that name is not defined because there is no value inside this. 58 00:04:46,850 --> 00:04:52,460 So let's comment this one and now let's check you can see that. 59 00:04:52,460 --> 00:04:59,660 Let me clear everything here and let me refresh and you can see I got undefined on line number ten on 60 00:04:59,660 --> 00:05:05,690 product components, line number ten meaning that there is no product found. 61 00:05:05,720 --> 00:05:07,670 Well, what is a problem? 62 00:05:07,700 --> 00:05:13,010 They take note here is that always the params that you go from the you are. 63 00:05:14,300 --> 00:05:19,100 Strange, but the idea of the product is a number. 64 00:05:19,130 --> 00:05:19,840 Check it out. 65 00:05:19,850 --> 00:05:21,800 You see, we have a number here. 66 00:05:22,100 --> 00:05:28,250 So what we need to do is that we can change this one to double code or single code of all the product 67 00:05:28,460 --> 00:05:29,930 that is first option. 68 00:05:29,930 --> 00:05:38,380 Or we can convert the ID to a number by using what is called number method and pass in the number. 69 00:05:38,390 --> 00:05:42,380 But we have the short way by adding plus to it. 70 00:05:42,410 --> 00:05:50,360 If I add plus meaning that I'm converting the string to a number now I can bring back my component and 71 00:05:50,360 --> 00:05:52,100 now let's save it. 72 00:05:52,100 --> 00:05:55,430 And now you can see that I have back my product. 73 00:05:55,580 --> 00:06:03,260 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 74 00:06:03,270 --> 00:06:08,960 product and I click on MacBook Pro or MacBook Air and see that I have that. 75 00:06:08,960 --> 00:06:17,210 So guys here and the complete solution and I react to Don as we move on, we are going to build a couple 76 00:06:17,210 --> 00:06:25,640 of application that is expenses, income tracker application using stock and then a complete authentication 77 00:06:25,640 --> 00:06:27,980 system using main stock. 78 00:06:28,010 --> 00:06:28,640 All right. 79 00:06:28,640 --> 00:06:30,710 So let's get rocking, guys.