All right my friends we now have the ability to list out streams create them edit them and delete them.
So in this video we're going to start working on the last big page of our application the show stream
page.
Now whenever a user comes to the path of streams slash three we're going to want to show this page right
here that has some details about the stream and eventually that video player as well.
Remember we're not going to really worry about the video player or the actual streaming of video until
the very end of the application because the real idea behind us app was to show you crud operations
remember create replays update destroy Razmi create read update destroy.
So we're going to first focus on just making sure that we can load up this particular stream and show
some details about it on the page.
That entire process is going to be just about identical to what we've now gone through with edits and
delete.
So we're going to want to make a class based component that's going to attempt to look at the your l
find the ID inside there fetch that stream get the stream out of our redux store and then show it inside
the render method pretty much the same thing we've now done twice over.
So let's get to it to get started.
Going to first open up my apt J.S. file inside of aptest.
Yes I'm going to make sure that I update my route right here from streams slash show because remember
that was kind of like a stand in route to instead be streams slash colon Id like so.
So then I'll save this and now the next thing we want to do is make sure that on our stream list so
the stream list over here any time that we click on like this header right here I want to navigate over
to the appropriate component like I want to navigate over two streams slash.
The idea that stream I had just clicked on.
So in order to do so I'm going to open up my stream list file stream list I'm going to scroll down a
little bit and I'll find render list right here.
So inside of render list we've got the div that contains the stream's title.
So we're going to want to wrap that with a link element from re-act Rotterdam so that whenever user
clicks on that title right there we attempt to navigate the user over to the appropriate page.
So I going to first make sure that we have imported the link tag or the link component from re-act Rotterdam.
So go up to the top here really quickly.
Yep we've got that import right there.
So go back down to render list and I'm going to wrap that stream title with link.
It's now going to pass this thing a prop.
Now just as we've seen many times before.
We're going to want to customize the path that this attempt to navigate to only when this thing gets
rendered because we essentially want to take the idea off the stream and customize that path.
So inside of a set of curly braces I'm going to place back ticks as usual not single quotes here we're
making use of tactics.
And I'll say slash dreams slash dollar sign Crilley brace stream dot ID.
So that's going to generate a path very much like the one that we want it will be streamed slash in
on the idea of the stream that we're trying to visit.
I'm also going to add on a class name to this link element of Hetter.
Like so.
All right.
Let's now save this and we'll flip back over.
And it looks like I now have links on the title of each of those different streams.
So let's now try clicking on one of these and just see what happens.
OK.
So I come over here and I see it streams show up on the screen.
I can go back and go to other stream.
Notice how I'm now at stream's slashed too.
And if I go back to the original one I meant streams slash 1.
OK.
That looks pretty darn good.
Now let's take a quick pause right here.
When we come back the next section will start working on our stream show component.