1 00:00:00,180 --> 00:00:07,500 We're almost done with our basic react router setup, but before we move on to a different topic, I 2 00:00:07,500 --> 00:00:11,810 also want to cover how we can deal with alerts. 3 00:00:12,300 --> 00:00:19,710 So in this case, notice I have the list of people, which is, of course, coming from my data. 4 00:00:19,710 --> 00:00:20,210 Correct. 5 00:00:20,580 --> 00:00:28,410 If we navigate a component, like I said, I import data, the file, the data that we have been using 6 00:00:29,010 --> 00:00:29,970 for our tutorial. 7 00:00:30,300 --> 00:00:34,350 I set up this used state hook where have people and set people. 8 00:00:34,590 --> 00:00:35,430 And I'm here. 9 00:00:35,670 --> 00:00:42,780 I just iterate over my list and then display the name on the person. 10 00:00:43,230 --> 00:00:49,800 But now what I would want is to set up some kind of placeholder where we can imagine that this could 11 00:00:49,800 --> 00:00:56,280 be a list of blog posts or list of products or whatever, some kind of list of items. 12 00:00:56,280 --> 00:01:06,150 And then once we click on that one specific item, we go to that placeholder page that just grabs the 13 00:01:06,150 --> 00:01:09,690 item that you clicked on and then displays it. 14 00:01:10,140 --> 00:01:16,800 So essentially, I don't have to create four different pages for each and every item in the list or 15 00:01:16,920 --> 00:01:20,430 20 different pages, depending on how big is the list. 16 00:01:21,000 --> 00:01:27,060 In this case, I can just create one placeholder and then regardless whether I have four thousand items 17 00:01:27,060 --> 00:01:34,770 or four items, the moment I'll open up that placeholder, I will grab that specific ID or some kind 18 00:01:34,770 --> 00:01:41,940 of data that is specific to that item and then display only that one item. 19 00:01:42,150 --> 00:01:49,380 And if you're a little bit iffy of what I'm trying to make, well, just hang with me and we'll be in 20 00:01:49,380 --> 00:01:50,080 good shape. 21 00:01:50,490 --> 00:01:53,610 So I have my list of items. 22 00:01:53,610 --> 00:01:54,090 Correct. 23 00:01:54,370 --> 00:01:58,560 I display them by iterating over my list. 24 00:01:58,920 --> 00:02:06,620 But what I would want is to set up that placeholder and we can do that if we navigate it next year. 25 00:02:06,630 --> 00:02:09,430 And I already have this person component. 26 00:02:09,840 --> 00:02:18,090 So if you navigate to a person component, you'll just see that we have a personal component and then 27 00:02:18,360 --> 00:02:25,030 it has a text of person just like the other components that we used for pages. 28 00:02:25,500 --> 00:02:29,250 Now, though, I would want to set up different things. 29 00:02:29,250 --> 00:02:37,320 And in the where this is my personal component and I'm going to go right above the area where we set 30 00:02:37,320 --> 00:02:38,010 up the root. 31 00:02:38,460 --> 00:02:40,740 So that will still say the same. 32 00:02:41,040 --> 00:02:47,400 Where we go without all the values are going to be a bit different because in this case, I would want 33 00:02:47,400 --> 00:02:51,600 to go with path and line instead of just words. 34 00:02:51,900 --> 00:02:55,460 We also had something called you URL parameters. 35 00:02:55,830 --> 00:02:59,620 So the first part, the beginning part can be up to you. 36 00:02:59,850 --> 00:03:04,350 You can either go with Fort's and then you can set up the your parameters. 37 00:03:04,350 --> 00:03:10,650 And by the way, those are going to be in react to the colon and learn whatever name you want. 38 00:03:11,010 --> 00:03:14,480 So in this case, you can go with ID, you can go with name. 39 00:03:14,940 --> 00:03:15,790 It's up to you. 40 00:03:16,080 --> 00:03:20,900 Again, this is just going to show up once we start accessing that value. 41 00:03:21,300 --> 00:03:22,960 So naming is up to you. 42 00:03:23,430 --> 00:03:26,400 Just remember that name because you'll have to use it. 43 00:03:26,790 --> 00:03:28,300 So in this case, I'm going to go with that. 44 00:03:28,710 --> 00:03:31,770 But remember, I said the beginning part is up to you. 45 00:03:32,130 --> 00:03:38,660 If you want, you can write Person and Fortgang and then, of course, Colon and idee. 46 00:03:38,940 --> 00:03:44,160 If you don't, you can simply write forward slash and then colon and then idy. 47 00:03:44,550 --> 00:03:50,310 So this beginning path you can make as long or as short as you one. 48 00:03:50,670 --> 00:03:51,660 And then in here. 49 00:03:52,650 --> 00:03:57,160 We do a little bit differently where we don't place that component inside. 50 00:03:57,180 --> 00:04:03,430 We go with children and then we set up well, which component we would want to display. 51 00:04:03,870 --> 00:04:07,860 So this person component will be our placeholder. 52 00:04:08,310 --> 00:04:15,840 So each and every time we will navigate to a person and then some kind of ID, we will display this 53 00:04:15,840 --> 00:04:16,770 person component. 54 00:04:16,920 --> 00:04:20,520 Now, the difference is going to be in that person component. 55 00:04:20,970 --> 00:04:25,300 We will grab that ID and fetch that data. 56 00:04:25,950 --> 00:04:30,120 So in our case, that is going to be that one specific person. 57 00:04:30,450 --> 00:04:32,100 Hopefully that is clear. 58 00:04:32,220 --> 00:04:33,690 We have our placeholder. 59 00:04:33,900 --> 00:04:36,380 We used our YORO parameters in this case. 60 00:04:36,630 --> 00:04:42,670 I mean, this ID, but you'll see in a second that the name is definitely your choice. 61 00:04:43,110 --> 00:04:47,570 And now what I would want is navigate back to a people. 62 00:04:48,030 --> 00:04:50,370 So let me find my people. 63 00:04:50,400 --> 00:04:50,890 All right. 64 00:04:51,360 --> 00:04:54,870 And in here, right next to the hunting for. 65 00:04:55,940 --> 00:05:03,080 I would want to set up a link, OK, so I imported the link component and I'll stay here heading for 66 00:05:03,290 --> 00:05:05,420 and now, of course, I have my component. 67 00:05:05,870 --> 00:05:08,960 Now, the difference and now is going to be that. 68 00:05:09,380 --> 00:05:09,880 Check it out. 69 00:05:10,130 --> 00:05:12,470 We are iterating over the list. 70 00:05:12,470 --> 00:05:12,980 Correct. 71 00:05:13,310 --> 00:05:21,560 And I have each and every ID available for the person where I know that that's how our data is structured. 72 00:05:21,890 --> 00:05:26,840 So now when we set up two, we need to set it up dynamically. 73 00:05:27,170 --> 00:05:28,450 Now, what do I mean by that? 74 00:05:28,460 --> 00:05:34,490 We set up curly braces and then we go with a template string where I say that I'm going to be navigating 75 00:05:34,490 --> 00:05:35,290 to a person. 76 00:05:35,660 --> 00:05:42,320 So the only reason why I'm adding this first part is because in the index, I also added this person, 77 00:05:42,650 --> 00:05:48,410 if you don't have it, if you just have the force and of course, don't add it, there are the person. 78 00:05:48,620 --> 00:05:52,160 So that's why I need to make sure that they both match. 79 00:05:52,700 --> 00:05:58,220 Then I have another force and this is where I pull that ID. 80 00:05:58,580 --> 00:06:03,200 So I know that in the data object, I have that right. 81 00:06:03,470 --> 00:06:10,220 So the only thing I need to do is go with person and then ID and what you'll notice that the moment 82 00:06:10,220 --> 00:06:18,590 you click on any of the links that we are about to display, they will all open the same page, that 83 00:06:18,590 --> 00:06:19,400 person page. 84 00:06:19,680 --> 00:06:24,160 The difference is going to be in the URL where the IDs will change. 85 00:06:24,530 --> 00:06:27,620 So within the link we can just write whatever we want. 86 00:06:27,650 --> 00:06:33,740 So in this case in which they learn more and once we save notice, these are my links. 87 00:06:34,040 --> 00:06:40,700 And like I said, every time you click on them, we are still opening the person page. 88 00:06:41,030 --> 00:06:45,160 So we're still navigating to the person and the idea. 89 00:06:45,350 --> 00:06:51,240 And then, of course, since in the children, the value was Person Kambona, that is what we're displaying. 90 00:06:51,590 --> 00:06:56,000 The difference is going to be the URL because notice now we have person and then one. 91 00:06:56,360 --> 00:07:02,720 So if we navigate to the third one, we have person, unfortunately, and hopefully get the gist. 92 00:07:03,140 --> 00:07:10,340 So now, of course, the question is, well, how I can access that value because the idea in the person 93 00:07:10,640 --> 00:07:12,230 is somewhat simple. 94 00:07:12,800 --> 00:07:17,060 Where in the person I would want to grab that value. 95 00:07:17,660 --> 00:07:19,040 And then in my case. 96 00:07:19,960 --> 00:07:25,400 I'm just going to look for that specific person in my data array now. 97 00:07:25,440 --> 00:07:28,650 Again, this is oversimplified example. 98 00:07:29,020 --> 00:07:36,240 Normally the way it works is you have a list of blog posts of list of products online. 99 00:07:36,250 --> 00:07:38,560 You already fetch them from the API. 100 00:07:38,830 --> 00:07:44,200 But then if you would want to have a more specific info, then of course, you fetch it one more time. 101 00:07:44,560 --> 00:07:51,810 So you set up the link where you navigate your placeholder page and you pass that it. 102 00:07:52,270 --> 00:07:57,710 And then in that placeholder, this is where, again, you set up another fetch. 103 00:07:57,940 --> 00:08:00,550 Now, in our case, since data is local. 104 00:08:00,580 --> 00:08:01,510 I don't have to do that. 105 00:08:01,780 --> 00:08:08,290 So I purposely didn't want to overcomplicate things, but just understand that this is over simplified 106 00:08:08,290 --> 00:08:08,940 example. 107 00:08:09,370 --> 00:08:17,510 And in order to access that, we need to use use programs hook from react or not. 108 00:08:17,920 --> 00:08:25,360 So again, this is coming from Reactor Dam where they provide this hook that allows us to access the 109 00:08:25,360 --> 00:08:32,020 parameters, not just to showcase that we can name our YORO parameters however we want. 110 00:08:32,350 --> 00:08:38,170 I can go with a log and then we go with use primes and then let me invoke it. 111 00:08:38,710 --> 00:08:43,990 And what you'll notice that the moment I navigate, for example, John. 112 00:08:45,380 --> 00:08:52,550 I don't see, of course, my placeholder, my person, and then in here I have the object, so in the 113 00:08:52,550 --> 00:08:58,610 object I have the idea property and the value is equal to a one, not one. 114 00:08:58,610 --> 00:09:02,540 Gocha, though, is that this will always be a string. 115 00:09:02,990 --> 00:09:07,850 And if you remember her data, it was a number. 116 00:09:08,240 --> 00:09:08,630 Correct. 117 00:09:08,900 --> 00:09:18,650 So that sometimes my trippier where some ipis have their ID's strengths and some of them have as a number. 118 00:09:18,950 --> 00:09:26,720 So for example, if there's no big deal, once you pass it through the reactor, you'll be still in 119 00:09:26,720 --> 00:09:27,380 good shape. 120 00:09:27,830 --> 00:09:33,650 But if there are numbers, then of course you'll have to keep on watching because and following a few 121 00:09:33,650 --> 00:09:37,200 minutes will fix this issue where this is a string. 122 00:09:37,250 --> 00:09:38,690 And that is very, very important. 123 00:09:39,230 --> 00:09:41,830 Keep in mind, this name is an ID. 124 00:09:42,260 --> 00:09:49,730 So what that means is when I was setting up my index and when I say person and then the name of my are 125 00:09:49,730 --> 00:09:59,450 a plumber was I d if I changed this around to a orange, you'll notice that the value doesn't change. 126 00:09:59,750 --> 00:10:00,730 It's still going to be one. 127 00:10:00,830 --> 00:10:06,140 So still within the people we can navigate around because we just passed in the House. 128 00:10:06,200 --> 00:10:08,580 The name of course is the Orange. 129 00:10:08,600 --> 00:10:16,720 So this is where I'm trying to make a case that naming is in most cases, up to you. 130 00:10:17,090 --> 00:10:18,200 So I have Heidi. 131 00:10:19,130 --> 00:10:26,630 I'm showcasing these placeholder, so now I would just want to have a simple setup where I'm going to 132 00:10:26,630 --> 00:10:34,130 display, well, which person is actually the one that I have clicked on in people, because for now, 133 00:10:34,130 --> 00:10:35,600 I'm just this the person. 134 00:10:35,780 --> 00:10:36,230 Correct. 135 00:10:36,680 --> 00:10:41,810 And the way we do that is navigating to person Jayesh. 136 00:10:42,240 --> 00:10:44,780 And I just want to get that value. 137 00:10:45,050 --> 00:10:50,720 And since I'm getting back the object from use, I'm sure I can simply say that it is going to be an 138 00:10:50,740 --> 00:10:51,070 idea. 139 00:10:51,380 --> 00:10:56,980 And I'll say use perhaps sorry, not use a fact and say use primes. 140 00:10:57,080 --> 00:10:58,430 So that should give me my. 141 00:10:59,060 --> 00:11:02,030 I know that I'm getting back the object and I'm just structuring the object. 142 00:11:02,390 --> 00:11:05,390 But I also want to set up some kind of state value. 143 00:11:05,720 --> 00:11:15,480 So second line, I'm looking for a name and then Satnam and that is equal to use state and phrenologists 144 00:11:15,500 --> 00:11:16,550 a default name. 145 00:11:16,940 --> 00:11:23,150 And where I have the heading to, I'll change this around and one and I'll say, yeah, you know what? 146 00:11:23,150 --> 00:11:24,780 I would want to display the name. 147 00:11:25,220 --> 00:11:30,940 I also would want to add a like just so I can navigate back to the people page. 148 00:11:31,280 --> 00:11:32,630 So let's say here link. 149 00:11:32,660 --> 00:11:35,080 And as you can see, of course I have already important. 150 00:11:35,480 --> 00:11:42,740 So we go here with a link and then to and in this case, I'm just going to say, let's navigate back 151 00:11:42,740 --> 00:11:43,710 to people. 152 00:11:43,940 --> 00:11:49,790 I'll also add a class name here, because I would want to add a little bit of Caesars online as far 153 00:11:49,790 --> 00:11:54,080 as the value I'll say back to and people. 154 00:11:54,560 --> 00:11:55,130 Beautiful. 155 00:11:55,430 --> 00:11:56,510 So once I save. 156 00:11:57,450 --> 00:12:04,050 When I click on Peter, I should have a default name and back to people, but the good news is that 157 00:12:04,050 --> 00:12:12,780 I have my ID so we could set up the usufruct where we could filter out, well, which person actually 158 00:12:12,780 --> 00:12:14,850 clicked on and then, of course, just changed the name. 159 00:12:15,030 --> 00:12:20,210 So that way we can always be sure whether Peter and or John. 160 00:12:20,580 --> 00:12:22,770 So we're going to go with usufruct. 161 00:12:22,800 --> 00:12:29,940 So essentially, once the component of is, then we want to call our callback function and I'll set 162 00:12:29,940 --> 00:12:33,270 up empty array so there's no dependencies in here. 163 00:12:33,600 --> 00:12:39,240 So just on the initial Ronder and now I'd want to get that person. 164 00:12:39,450 --> 00:12:46,050 So I'm going to go const and I'll call this new person and that is equal to a data and now I'm just 165 00:12:46,050 --> 00:12:47,370 going to use the find method. 166 00:12:47,790 --> 00:12:57,600 Now the Gotcher here is that of course I would want to pass the string because keep in mind that this 167 00:12:57,600 --> 00:13:01,300 is a string and in my data this is going to be an ID. 168 00:13:01,590 --> 00:13:11,850 So if you'll simply say like show where you have the personality matches the ID, this is not going 169 00:13:11,850 --> 00:13:13,200 to get you any person. 170 00:13:13,320 --> 00:13:14,320 Why won't? 171 00:13:14,340 --> 00:13:18,420 Because of this one is a number and this one is a string. 172 00:13:18,720 --> 00:13:27,840 So what you need to do is go with past and end and then you wrap the ID inside there and of course you 173 00:13:27,840 --> 00:13:29,860 need to be closing parentheses. 174 00:13:30,120 --> 00:13:32,960 So now I have my new person on line. 175 00:13:32,970 --> 00:13:38,860 I can go with Satnam and we're going to go with a new person and then dot a name. 176 00:13:39,300 --> 00:13:40,620 So now what will happen? 177 00:13:41,600 --> 00:13:48,620 I have the beer, so if I never get back to people and I click on Susan now, of course the value will 178 00:13:48,620 --> 00:13:49,420 be Susan. 179 00:13:49,700 --> 00:13:53,330 So that's how we can deal with let's set up the placeholder. 180 00:13:53,540 --> 00:14:00,110 And then each and every time we click on some item, instead of creating a brand new page, we use the 181 00:14:00,110 --> 00:14:00,860 same page. 182 00:14:01,130 --> 00:14:09,200 But there is already some kind of setup where I can get that unique value about that product or blog 183 00:14:09,200 --> 00:14:18,260 post or whatever, and then we can fetch it and display that specific item in the placeholder. 184 00:14:18,600 --> 00:14:26,450 So we create only one component, only one page, and that could be used by 4000 items or four items 185 00:14:26,660 --> 00:14:28,780 like it is in our case.