Now that we have fetched our appropriate stream anytime that we come to our streams delete slash ID
route we can show some details about that stream on the motile so that the user knows exactly what stream
they are actually deleting as usual to get some information from our redux store into our component.
We're going to define a map state to prop's function.
So I will flip back over to it stream delete.
I'm going to go down to the bottom and I will define map state to prop's right now what should we call
essentially doing the same exact thing that we went through back on the stream edit components.
So when we call map stage props right here or when this function gets called by re-act redux it's going
to be called with both the state out of our redux store and the second argument of own props and remember
own props right here is the exact same props object that is going to be passed to our component.
The reason we want props is so that we can look at that match prop right there and pull out the idea
of the stream that we're supposed to be showing on this page.
So inside of Matt state the props are going to return an object with the key of stream.
We're going to look at state DOT streams.
Remember state that streams is an object with all of the different streams that we've loaded up.
And if you need a quick reminder that you can always flip back over to your redux step tools click on
that state button right there and then expand streams.
So remember we've got an object right here where the keys are the IDs of each stream.
So now I will reference state data streams and I want to get States streams which specifically the key
of three and we can get that key of three by looking at own props and pulling out the match forams id
property out there from the Ural essentially I'll say square brackets own props match Priam's Id like
the.
All right.
Now I'm not going to forget the next step even though I forgot it like three or four times in this course
so far.
We're going to make sure that we pass maps straight to prop's into connect.
As the first argument.
So map state to prop's like so.
All right so now we can make sure that we attempt to show this stream or some details about the stream
inside of our motile.
Now a quick reminder when this component first gets rendered to the screen it's entirely possible that
we will not have our stream loaded up just yet.
Because remember the component is going to be rendered to the screen one time then our component in
MT lifecycle method will be called.
So the first time this thing gets rendered It's entirely possible that we will not have our stream yet.
So to handle that there's a couple of different things we can do.
We can either take a similar approach to what we've done in the past where we can do something like
if there is no destock props thought stream then return a div with a text loading.
But this is just a little bit awkward.
The reason for that is that now anytime the user first loads up our application they're going to see
like that div with loading up here and then the modem is going to appear it would be maybe just a little
bit better if we showed the motile right away and maybe we just don't have the text for the stream that
is supposed to be displayed.
So the user will see a modal right away and then like a half second later the title of the stream will
appear inside the content.
I think that would be a little bit less jarring to the user rather than showing them like some loading
text up here and then popping up the modal but realistically we could do it absolutely either way.
So in order to always show the modal and then just make sure that we update the content field with the
title of the stream I'm going to delete that if statements and I'm going to define another helper method
inside of your called render content so as you might guess render content is going to produce whatever
text it's a post be passed up to the content Propp of modal.
So now inside if you're all say if we do not yet have a stream loaded up then return.
Are you sure you want to get single quotes in here.
Not double.
Are you sure you want to delete this stream.
And then if we have loaded that thing up we can return.
Are you sure you want to delete the stream with title and then we can protect the title inside of your.
To print that out.
We should probably use a E.S. 20:15 template string.
So going to replace those single quotes with back to X and then after that what we say.
Are you sure you want to delete the stream title colon and then we'll do some interpellation here and
we'll say this not prop's stream title.
OK that's a really long line Salumi zoom out so you can see the entire thing.
So again render content is going to say if we do not yet have a stream just print out this kind of like
standon message and then once we actually fetch the stream put the title of the stream into the message
and zoom back in.
And now for content right here rather than just directly assigning a string we can instead place some
curly braces and then make a call to this dot render content like so.
Now last thing I want to point out here is that inside of a render method we currently have the text
stream delete.
And you'll notice that inside of our browser that text is showing up right over here in the background
which is really probably not ideal.
We just don't need to show that text at all.
So I'm going to delete that text of stream delete from the render method.
In addition we've got the wrapping div right here.
We really don't even need the wrapping div at all as well there's no point to that div because nothing
actually shows up inside of it.
Remember our modal uses a re-act portal.
So anything that gets rendered by the modal is going to go directly to the div that we had put into
our indexed HTL file the one with the ID of modal that was the entire point of that portal.
So there's really no point to having this device here at all.
So I going to delete that wrapping as well and I'm left with just returning our modal component.
All right.
I think it's time for a test here.
So going to save this and we'll flip back over it and we'll see how we're doing.
OK.
So back over here my reload kicked in right away.
And I see.
Are you sure you want to delete the stream a title.
I created this stream and so now we could click delete or cancel.
Of course clicking those don't do anything just yet but we'll wired that up in just a second just to
make sure that this works correctly.
I'm going to refresh the page and I still see the title appear right there.
You can also notice that the text can have very suddenly changes like instantaneously because when we
first render the modal to the screen we've got that initial content of.
Are you sure you want to delete the stream and then only after we fetch the thing do we add in the title
at the end.
That's why you see that kind of little blink inside there.
OK so this looks pretty good.
Now the user knows exactly what stream they are attempting to delete.
So unless we have to do is make sure that we wire up the delete and cancel buttons right here.
So let's take care of that in the next video.