1 00:00:00,240 --> 00:00:06,810 And to complete our reactor out our dump setup we're gonna run the rest of the pages starting from checkout 2 00:00:07,140 --> 00:00:12,720 all the way to a product details but the product details is going to be a bit different and you can 3 00:00:12,720 --> 00:00:16,970 think of product details as a placeholder because keep in mind. 4 00:00:16,980 --> 00:00:22,890 Product details is not going to be hardcoded in fact for each and every product I can open up the page 5 00:00:23,150 --> 00:00:26,750 and there's going to be specific information about that product. 6 00:00:26,790 --> 00:00:28,350 So we're gonna have a placeholder. 7 00:00:28,410 --> 00:00:33,180 Then we're just going to fetch information about that specific product and then we're gonna render it. 8 00:00:33,300 --> 00:00:36,080 I'm going to we're going to do that using the URL primers. 9 00:00:36,390 --> 00:00:40,650 If you check out the finished project you're going to notice that each and every time you're navigating 10 00:00:40,950 --> 00:00:47,340 to a single product page the URL is going to be product and then whatever the idea in this case this 11 00:00:47,340 --> 00:00:50,190 is done I'm going to head over to a different product. 12 00:00:50,310 --> 00:00:51,720 Then the idea is going to change. 13 00:00:51,720 --> 00:00:54,110 And in this case it is going to be nine. 14 00:00:54,150 --> 00:00:57,760 So let's start again very simply by just getting the rest of the pages. 15 00:00:57,800 --> 00:01:02,570 Check out logging and product and then we're going to start dealing with product details. 16 00:01:02,940 --> 00:01:10,170 So what I'm gonna do above the error I'm just gonna copy and paste it again and make sure that we get 17 00:01:10,170 --> 00:01:11,380 the right pages. 18 00:01:11,490 --> 00:01:18,450 So I'm going to say the path is going to be checkout design also the component is gonna be checkout 19 00:01:18,920 --> 00:01:23,230 and I know it's a bit tedious but I mean we just have to do this. 20 00:01:23,250 --> 00:01:31,530 So let me copy it one more time then I'm gonna go for a log in so the page I want to display is a log 21 00:01:31,530 --> 00:01:35,780 in page and then of course the path also should match. 22 00:01:35,850 --> 00:01:39,150 So I'm gonna go with a log in then let me check. 23 00:01:39,150 --> 00:01:43,220 I have the product nine as well I have the product details. 24 00:01:43,540 --> 00:01:46,060 So in this case let me copy and paste it. 25 00:01:46,090 --> 00:01:49,780 1 2 and 9 for the products. 26 00:01:49,890 --> 00:01:57,180 The path is gonna be products and then of course the page that I would want to display is the product 27 00:01:57,180 --> 00:01:57,480 page. 28 00:01:57,480 --> 00:02:02,020 However I'm also going to add here exact like. 29 00:02:02,030 --> 00:02:07,640 So now we're gonna start dealing with our product details first of all what is going to be bath what 30 00:02:07,690 --> 00:02:14,250 the path is going to be PRODUCTS AND THEN WE'RE GONNA PASS IN OUR you are up grammars the way we set 31 00:02:14,250 --> 00:02:19,170 up the URL parameters we have the call colon and then whatever name we would want. 32 00:02:19,170 --> 00:02:23,850 Now in my case I'm going to go with an idea but please understand how you can use whatever name you 33 00:02:23,850 --> 00:02:25,510 want it's still going to work. 34 00:02:25,530 --> 00:02:30,810 So even if you would name this banana you're still gonna be able to access that parameter. 35 00:02:30,810 --> 00:02:33,830 And now we would need to say well what kind of page we would want to render. 36 00:02:34,070 --> 00:02:39,620 However whenever we're dealing with you are all primers we're going to use children. 37 00:02:39,870 --> 00:02:45,540 So instead of placing a product detail within the root we're going to lead this and we're going to go 38 00:02:45,540 --> 00:02:51,650 with children and then within the children I'm going to display my product details. 39 00:02:51,720 --> 00:02:59,630 So let me look for my component product details and I'm rendering right now my product details. 40 00:03:00,030 --> 00:03:03,770 Let me save it and first let me show you where we can get more info. 41 00:03:03,840 --> 00:03:08,450 Again if we had over back to the docs we have you our old parameters. 42 00:03:08,450 --> 00:03:09,070 Correct. 43 00:03:09,120 --> 00:03:15,120 And then what happens here is that again they start with a colon and then whatever name you want. 44 00:03:15,120 --> 00:03:20,310 So in this case they're showing I.D. And we're also using the idea but you can name this whole you'd 45 00:03:20,310 --> 00:03:28,590 like and then in the latest version at the time of the recording do you react or down 5 instead of using 46 00:03:28,590 --> 00:03:35,360 the props like we did previously we use the use prams hook and in this case notice. 47 00:03:35,530 --> 00:03:39,390 So I'm using used primes which is imported from react rather dumb. 48 00:03:39,750 --> 00:03:42,240 And then I can just select whatever name. 49 00:03:42,240 --> 00:03:44,160 So in this case it does need to match. 50 00:03:44,160 --> 00:03:46,560 So if you named your parameter a banana. 51 00:03:46,740 --> 00:03:49,290 Make sure that you're also accessing banana here. 52 00:03:49,290 --> 00:03:52,010 If I name this I.D. then I'm going to access the eddy. 53 00:03:52,200 --> 00:03:56,920 In that case I'm gonna display the dynamic info that's coming from the parameter. 54 00:03:57,030 --> 00:04:02,160 And as always the best way to show that is if we're going to head over back to our project. 55 00:04:02,160 --> 00:04:08,520 Now we're going to navigate to a product details and are currently again there's nothing there but we're 56 00:04:08,520 --> 00:04:15,000 gonna set up our use Brown just so we can see how we can get a specific information about each and every 57 00:04:15,000 --> 00:04:15,600 product. 58 00:04:15,630 --> 00:04:22,170 So we do need to first do our import and we're going to import the use prams hook from reactor water 59 00:04:22,170 --> 00:04:28,470 down so use prams and it's coming from react a router down. 60 00:04:28,470 --> 00:04:30,840 So we have our import awesome. 61 00:04:30,980 --> 00:04:36,390 We're going to have a low from product details and then of course we're gonna display some kind of unique 62 00:04:36,390 --> 00:04:39,550 I.D. just so you can see that our functionality is working. 63 00:04:39,720 --> 00:04:45,750 And then since it is a hook within our component I'm just going to say that I would want to get back 64 00:04:45,750 --> 00:04:46,740 my I.D.. 65 00:04:46,860 --> 00:04:50,520 Now if you're interested what you're getting back you can just simply console log. 66 00:04:50,610 --> 00:04:56,850 So you'd use Brahms since it's there's a hook we're just going to run it and then in order to see what 67 00:04:56,850 --> 00:05:02,370 we're gonna have in the console you just need to navigate to a product and whatever you would want to 68 00:05:02,370 --> 00:05:02,940 pass. 69 00:05:02,940 --> 00:05:05,100 Now technically you don't even need to pass here. 70 00:05:05,100 --> 00:05:10,350 No because what you're gonna be accessing the I.D. And remember you can call this however you'd like. 71 00:05:10,350 --> 00:05:13,290 So again you can call the string or whatever you'd want. 72 00:05:13,590 --> 00:05:21,590 But in my case I am going to pass the number and what we should have within a console is our use primes. 73 00:05:21,750 --> 00:05:28,620 And I have nothing interesting not let's over back and check and yes the reason why I don't have anything 74 00:05:28,950 --> 00:05:31,890 because my route should be products. 75 00:05:31,920 --> 00:05:38,640 So now once I fix it once I say product because that is the proper out that I have in my URL you're 76 00:05:38,640 --> 00:05:44,250 going to see that you're getting essentially back the object and then within the object you have your 77 00:05:44,250 --> 00:05:45,210 I.D. again. 78 00:05:45,390 --> 00:05:50,600 If I'm going to name this differently I'm gonna name this banana you're going to get banana back. 79 00:05:50,640 --> 00:05:53,680 Now the value is still gonna be of course equal to five. 80 00:05:53,790 --> 00:05:59,610 And also keep in mind that you're getting back a string not is gonna be later important when we're gonna 81 00:05:59,640 --> 00:06:05,940 be fetching for that specific product but whatever parameter name you're gonna give. 82 00:06:05,940 --> 00:06:10,020 Well that one you're going to access using the use primes. 83 00:06:10,020 --> 00:06:16,260 So again I'm gonna switch back to I.D. And of course the only thing we need to do right now is to the 84 00:06:16,260 --> 00:06:25,200 structure the I.D. from use primes and we can simply do that by assigning our let's say I.D. variable 85 00:06:25,680 --> 00:06:27,810 to our use parameters. 86 00:06:27,840 --> 00:06:34,170 So now we're just going to get our I.D. in order to show that we're getting the unique I.D. I'm just 87 00:06:34,170 --> 00:06:43,020 gonna render it some say that I would like to show the I.D. So product I.D. is and we're going to have 88 00:06:43,110 --> 00:06:49,380 a call in and then in this case I have hello from product details page product I.D. is five if we're 89 00:06:49,380 --> 00:06:56,280 gonna change our You are a primer if let's say we're gonna set it equal to nine then of course our product 90 00:06:56,330 --> 00:07:02,400 I.D. is going to be nine the way it's gonna work is we're gonna get all our product and then like I 91 00:07:02,400 --> 00:07:08,000 said this page is going to be like a placeholder where for each and every time we're going to navigate 92 00:07:08,000 --> 00:07:15,000 to that page we're going to grab the ideas we're going to grab the I.D. that is being passed in as our 93 00:07:15,000 --> 00:07:18,690 parameter and then we're gonna fetch that specific product. 94 00:07:18,720 --> 00:07:23,230 That's the reason why when we let's say navigate to a specific product page. 95 00:07:23,340 --> 00:07:28,210 Well then we display the info about that product not about all the products or different product. 96 00:07:28,250 --> 00:07:30,420 Not if we have the idea of sex. 97 00:07:30,510 --> 00:07:34,300 Then we're going to display the product that has the idea of sex.