We're almost done with our basic react router setup, but before we move on to a different topic, I
also want to cover how we can deal with alerts.
So in this case, notice I have the list of people, which is, of course, coming from my data.
Correct.
If we navigate a component, like I said, I import data, the file, the data that we have been using
for our tutorial.
I set up this used state hook where have people and set people.
And I'm here.
I just iterate over my list and then display the name on the person.
But now what I would want is to set up some kind of placeholder where we can imagine that this could
be a list of blog posts or list of products or whatever, some kind of list of items.
And then once we click on that one specific item, we go to that placeholder page that just grabs the
item that you clicked on and then displays it.
So essentially, I don't have to create four different pages for each and every item in the list or
20 different pages, depending on how big is the list.
In this case, I can just create one placeholder and then regardless whether I have four thousand items
or four items, the moment I'll open up that placeholder, I will grab that specific ID or some kind
of data that is specific to that item and then display only that one item.
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
good shape.
So I have my list of items.
Correct.
I display them by iterating over my list.
But what I would want is to set up that placeholder and we can do that if we navigate it next year.
And I already have this person component.
So if you navigate to a person component, you'll just see that we have a personal component and then
it has a text of person just like the other components that we used for pages.
Now, though, I would want to set up different things.
And in the where this is my personal component and I'm going to go right above the area where we set
up the root.
So that will still say the same.
Where we go without all the values are going to be a bit different because in this case, I would want
to go with path and line instead of just words.
We also had something called you URL parameters.
So the first part, the beginning part can be up to you.
You can either go with Fort's and then you can set up the your parameters.
And by the way, those are going to be in react to the colon and learn whatever name you want.
So in this case, you can go with ID, you can go with name.
It's up to you.
Again, this is just going to show up once we start accessing that value.
So naming is up to you.
Just remember that name because you'll have to use it.
So in this case, I'm going to go with that.
But remember, I said the beginning part is up to you.
If you want, you can write Person and Fortgang and then, of course, Colon and idee.
If you don't, you can simply write forward slash and then colon and then idy.
So this beginning path you can make as long or as short as you one.
And then in here.
We do a little bit differently where we don't place that component inside.
We go with children and then we set up well, which component we would want to display.
So this person component will be our placeholder.
So each and every time we will navigate to a person and then some kind of ID, we will display this
person component.
Now, the difference is going to be in that person component.
We will grab that ID and fetch that data.
So in our case, that is going to be that one specific person.
Hopefully that is clear.
We have our placeholder.
We used our YORO parameters in this case.
I mean, this ID, but you'll see in a second that the name is definitely your choice.
And now what I would want is navigate back to a people.
So let me find my people.
All right.
And in here, right next to the hunting for.
I would want to set up a link, OK, so I imported the link component and I'll stay here heading for
and now, of course, I have my component.
Now, the difference and now is going to be that.
Check it out.
We are iterating over the list.
Correct.
And I have each and every ID available for the person where I know that that's how our data is structured.
So now when we set up two, we need to set it up dynamically.
Now, what do I mean by that?
We set up curly braces and then we go with a template string where I say that I'm going to be navigating
to a person.
So the only reason why I'm adding this first part is because in the index, I also added this person,
if you don't have it, if you just have the force and of course, don't add it, there are the person.
So that's why I need to make sure that they both match.
Then I have another force and this is where I pull that ID.
So I know that in the data object, I have that right.
So the only thing I need to do is go with person and then ID and what you'll notice that the moment
you click on any of the links that we are about to display, they will all open the same page, that
person page.
The difference is going to be in the URL where the IDs will change.
So within the link we can just write whatever we want.
So in this case in which they learn more and once we save notice, these are my links.
And like I said, every time you click on them, we are still opening the person page.
So we're still navigating to the person and the idea.
And then, of course, since in the children, the value was Person Kambona, that is what we're displaying.
The difference is going to be the URL because notice now we have person and then one.
So if we navigate to the third one, we have person, unfortunately, and hopefully get the gist.
So now, of course, the question is, well, how I can access that value because the idea in the person
is somewhat simple.
Where in the person I would want to grab that value.
And then in my case.
I'm just going to look for that specific person in my data array now.
Again, this is oversimplified example.
Normally the way it works is you have a list of blog posts of list of products online.
You already fetch them from the API.
But then if you would want to have a more specific info, then of course, you fetch it one more time.
So you set up the link where you navigate your placeholder page and you pass that it.
And then in that placeholder, this is where, again, you set up another fetch.
Now, in our case, since data is local.
I don't have to do that.
So I purposely didn't want to overcomplicate things, but just understand that this is over simplified
example.
And in order to access that, we need to use use programs hook from react or not.
So again, this is coming from Reactor Dam where they provide this hook that allows us to access the
parameters, not just to showcase that we can name our YORO parameters however we want.
I can go with a log and then we go with use primes and then let me invoke it.
And what you'll notice that the moment I navigate, for example, John.
I don't see, of course, my placeholder, my person, and then in here I have the object, so in the
object I have the idea property and the value is equal to a one, not one.
Gocha, though, is that this will always be a string.
And if you remember her data, it was a number.
Correct.
So that sometimes my trippier where some ipis have their ID's strengths and some of them have as a number.
So for example, if there's no big deal, once you pass it through the reactor, you'll be still in
good shape.
But if there are numbers, then of course you'll have to keep on watching because and following a few
minutes will fix this issue where this is a string.
And that is very, very important.
Keep in mind, this name is an ID.
So what that means is when I was setting up my index and when I say person and then the name of my are
a plumber was I d if I changed this around to a orange, you'll notice that the value doesn't change.
It's still going to be one.
So still within the people we can navigate around because we just passed in the House.
The name of course is the Orange.
So this is where I'm trying to make a case that naming is in most cases, up to you.
So I have Heidi.
I'm showcasing these placeholder, so now I would just want to have a simple setup where I'm going to
display, well, which person is actually the one that I have clicked on in people, because for now,
I'm just this the person.
Correct.
And the way we do that is navigating to person Jayesh.
And I just want to get that value.
And since I'm getting back the object from use, I'm sure I can simply say that it is going to be an
idea.
And I'll say use perhaps sorry, not use a fact and say use primes.
So that should give me my.
I know that I'm getting back the object and I'm just structuring the object.
But I also want to set up some kind of state value.
So second line, I'm looking for a name and then Satnam and that is equal to use state and phrenologists
a default name.
And where I have the heading to, I'll change this around and one and I'll say, yeah, you know what?
I would want to display the name.
I also would want to add a like just so I can navigate back to the people page.
So let's say here link.
And as you can see, of course I have already important.
So we go here with a link and then to and in this case, I'm just going to say, let's navigate back
to people.
I'll also add a class name here, because I would want to add a little bit of Caesars online as far
as the value I'll say back to and people.
Beautiful.
So once I save.
When I click on Peter, I should have a default name and back to people, but the good news is that
I have my ID so we could set up the usufruct where we could filter out, well, which person actually
clicked on and then, of course, just changed the name.
So that way we can always be sure whether Peter and or John.
So we're going to go with usufruct.
So essentially, once the component of is, then we want to call our callback function and I'll set
up empty array so there's no dependencies in here.
So just on the initial Ronder and now I'd want to get that person.
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
going to use the find method.
Now the Gotcher here is that of course I would want to pass the string because keep in mind that this
is a string and in my data this is going to be an ID.
So if you'll simply say like show where you have the personality matches the ID, this is not going
to get you any person.
Why won't?
Because of this one is a number and this one is a string.
So what you need to do is go with past and end and then you wrap the ID inside there and of course you
need to be closing parentheses.
So now I have my new person on line.
I can go with Satnam and we're going to go with a new person and then dot a name.
So now what will happen?
I have the beer, so if I never get back to people and I click on Susan now, of course the value will
be Susan.
So that's how we can deal with let's set up the placeholder.
And then each and every time we click on some item, instead of creating a brand new page, we use the
same page.
But there is already some kind of setup where I can get that unique value about that product or blog
post or whatever, and then we can fetch it and display that specific item in the placeholder.
So we create only one component, only one page, and that could be used by 4000 items or four items
like it is in our case.