Now that we are loading up our list of strings into our application we want to make sure that these
get rendered out by the streamlets component.
Now as a quick reminder here's what our mock up is supposed to look like.
So in essence it's just going to be a pretty simple straightforward list very similar to the list that
we've rendered out throughout this course.
So let's just flip back over to our component and we'll get to work right away.
So I gonna flip back over to a stream list.
The first thing we need to do is to make sure that we get our list of streams available as props inside
of our component.
So I'm going to define a map state to prop's function
underneath our class.
Now this is going to receive our state as the argument and then we're going to return an object that
has a stream's property and this needs to contain all the different streams.
Now here's where things get a little bit interesting.
Remember that our lists of streams is actually stored inside of an object.
It looks like this right here.
So we are probably going to want to map over this list of streams and read out some UL or see me some
apply for each element inside there.
Usually what we do is leave the list of streams in this object form inside of our redux store we'll
leave them in this object form because it makes it really easy to update add and delete records.
But when we eventually take these streams and get them into a component through map state to props usually
we will turn that object into an actual array more similar to how we made use of records or lists of
data previously.
Inside this course the reason that we turn into an array before it gets into our component is just to
make sure that it's really easy to map over and run that map function.
Now of course we can use a mapping function with an object by using load ash but just to keep things
all that easy and not have quite such a big dependency on ASH we usually just turn that thing into an
array before it goes into our component.
So we've got our state argument right here the property on there that we care about is streams so states
streams to get a list of just the streams that if you're inside of an array and not have to worry about
the object nature of the thing we're going to call object values and then pass in state streams like
so.
So object of values is a built in javascript function.
It's going to take an object as an argument.
All the different values inside of that object are going to be pulled out and then inserted into an
array.
So that's exactly what object of values does it just turns all the values inside that object into an
array.
So now inside of our component we're going to have a prop called destock Propst dot streams and that's
going to be an array of all of our different streams.
As a quick test let's just out on a quick console log to our render method and a console log out.
This dock props streams like so.
And now if I flip back over I see the undefined right there you know refresh really quickly.
So I still see undefined which means that I'm probably doing something a little bit off.
Oh I never hooked up map stage props.
Yeah that would do it.
All right.
Let's make sure we pass that in as the first argument.
Really quick.
So I'll pass that into the connect function.
That's much better.
And so now I see the array right here it has two elements inside of it because I have two streams.
All right.
That looks good.
So now we can flip back over to our component.
I'm going to delete that console log and above my render method.
I'm going to define a new method called you guessed it render list.
So the goal of this method is to take that list of streams and just render them out as a list on the
screen.
So inside of your I'm going to return the result of this stop Propp start streams map.
So for each stream we're going to return some amount of GSX I'm going to make a multi-line GSX block
you're going to place a div with the class name of item and will give it a key of stream Dom.
ID
and then inside there I'm going to place an icon with a class name of large middle aligned icon camera
and claps my sidebar so you can see the whole line.
Now that's just going to be a nice icon camera looking thing just a little bit of decoration.
So I'm going to actually do anything for us or then place a div inside there with a class name of content
and inside that div right now I'm just going to print out the stream title and then after that when
we get that closing curly brace I'm going to placing another div with a class name of description.
And for the description we'll print out the streams description property.
Now let's make sure that we eventually call this thing from the render method.
So don't say my render method I'm going to turn this again into a JSM multi-line GSX block and I'll
give this thing a div How about an H to header.
Let's say something like simply streams and then I'm going to place a div with a class name of UI seld
list.
And inside that thing I'm going to call this dot render list
OK.
So a whole bunch of typing here but really nothing new.
We've gone over Lisp building quite a bit inside this course.
I going to save this now and then I'll flip back over to my browser and I'll see my list of streams
appear.
Awesome.
So the icon on there is kind of a nice little touch I guess.
So this definitely looks pretty close to our mockup over here.
Not bad at all.
Now remember we do want to make sure that these streams.
If I was the creator of a stream I want to see a delete and edit button on there as well.
In addition the header right here for the actual stream title should be clickable so that if I click
on that right there I should go to the stream detail page right here at the Sjostrom component.
So you still have a little bit of work to do on this component.
So let's take a quick pause right here and I'll catch you in the next video.