In this video we're going to start updating your application to make use of your L based selection to
do so there's two separate things we need to do.
First off we need to make sure that any time that a user clicks on this edit button next to a stream
they go to a route of something like streams flash edit and then the idea of the stream that the user
just clicked on the button for.
After that we need to make sure that we also update our routing information inside of our apt Yes file
to make sure that anytime that a user goes to a URL like streams edits slash ID it shows the stream
edit component.
At present we have wired up our routing rules to say that any time a user goes to stream slash at it
they see the stream edit component.
So word is going to do a little tweak around our routing rules.
So let's first start off by updating our button right here.
The edit stream button.
So I'm going to open up my streams stream list component.
Here it is right here and then going to scroll down a little bit and find render list.
Now you'll recall that inside of Brender list we are calling render admen with each individual stream
and it's up to render admin to return the appropriate buttons.
Let's find the render admen method.
Here it is right here.
So at present we have two button components or two button elements being rendered inside of your.
We no longer want to have button elements we want to have an actual link tag from re-act router dom
so that we can navigate a user to some different page inside of application.
So I'm going to collapse my sidebar here.
Notice how we've already imported the link component from reactor at her dumb language to delete the
edit button right here entirely.
And I'm going to replace it with a link instead.
I'm going to again give it the same text it had before of edit.
I'm going to give it a class name of UI button primary and then I'm going to make sure that also gets
the two property.
Now in this case the two is not going to be some fixed value.
Instead we need to essentially take the idea of the stream and insert it into the two string that we
generate.
So we want to end up with a two prop of streams at it.
And then the idea of the stream that we passed into our render admin function.
So essentially we want to do a little calculation here as opposed to passing in a fixed string.
We're going to use a 2015 template string to do so.
We have to use our curly braces like so then put in my back to X and then I will say slash streams at
it and then I want to put in the ID of the stream that we are iterating over soldier dollar sign clearly
brace stream Id like so now again make sure that you have back Tick's here not single quotes and once
we've got this all put together I'm going to save this file when I do.
You're going to see the code jump here really quickly just to reformat it like the
now issue.
If we flip back over to our application and we hover over that edit button you'll notice the L that
pops up on the bottom left inside says stream's slash at it slash 3.
So if I click on that I want to go to the stream edit component or that page and the information here
is trying to convey or the L is trying to convey that we want to edit the stream with an idea of three.
So now the next thing we need to do is make sure that we update our routing rules inside of my apt.
J.S. file we need to find the route that is defining our stream edit component we need to make sure
that this thing understands that if a user ever goes to streams at it and then some ID we still want
to show stream at it.
So to do so we're going to put on another forward slash at the very end and we'll say Colin Id just
like we saw it in the diagram.
So now if a user goes to streams edit slash anything we're going to show the stream edit component.
Let's save this file and we'll test that out.
So I'm going to save the uptalk just file.
Flip back over.
I'll do a quick refresh just to make sure I got that update and then I'll click on my edit button right
here and when I do so I will see stream edit appear on the screen.
Perfect.
So now we can show stream edits regardless of the ID that we have inside of you or else I can try going
to edit one and all still see the same component on the screen.
I could go to Edit too.
I still see the same thing.
I can even go to edit some really long number like so and I'll still see that component on the screen.
So I remember as soon as he put in Colin and then anything inside the OR l That means that this is going
to be essentially a variable and he could have any value that you want for that part of the URL.
Now one quick thing I want to mention here we did not have to say specifically ID here.
This could have been Kolin anything that you want.
It's essentially the colon that is the magical character here.
The colon is what turns us into a variable of sorts.
OK.
So I'm going to save that.
Now the next thing we need to do is to make sure that any time that a user comes to this page we somehow
get that number out of the Eurail like the three and we communicate that number down into stream at
it so that the stream at a component knows exactly what STREAM it is trying to change.
So let's take a quick pause right here and we'll figure out how to do that in the next video.