In the last video we were able to successfully console log out some data inside of a real component.
The special thing about this data is that it was sourced from our redux store.
So we got some information from our retail store by defining that map stage props function and then
passing it to the connect function down here.
Now that we've got our list of songs inside of our song component we can start to focus on building
a list of elements out of them.
So this is going to be just like every other list that we've built so far.
We're going to map over our this prop's songs array member that contains the list of song objects and
for every song inside there we're going to return some GSX that's going to represent that song on our
list.
Now as a quick reminder at the end of the day we want something that looks like this.
So we should see the song title.
And then a select button right next to it.
We're not going to worry about implementing any functionality around the like button just yet.
We're just going to get this GSX to appear on the screen and then we'll start to worry about wiring
up that slick button after that.
So let's get to it back instead of my song list component.
I'm going to clean up that console log inside the render method and then going to add in a new helper
method to the song list component I'll say render list.
So the goal of this method right here is to just take our list of songs map over them and return a big
blob of GSX So inside of your I'm going to say return this prop's songs.
Matt and then I'm going to pass the mapping function a function that's going to be called with each
song object inside of that array and then inside of here we're going to return some amount of GSX that
uses some properties out of that song object.
Very quickly I want to mention make sure you've got the two return key words inside of render list the
return statement.
This one right here is returning some amount of GSX for the mapping function.
The map statement overall is going to produce a brand new array of GSX elements and after we produce
that array we want to return the array from the Wunderlist method.
So that's why we have to return keywords here in a row.
All right.
So inside of here we're going to build out a list of elements.
Now we've already used semantic UI quite a bit to build that list.
So I'm not going to reference the semantic UI documentation.
If you want to you could pull up the semantic UI docs and understand where I'm pulling all these different
class names from.
But I'm going to kind of throw the class names on here.
Remember these are just class names that are pulled from semantic UI to get Arliss to look pretty reasonable.
All right.
So inside if you're going to place a div with the class aim of item and I'm also going to give it a
key.
Remember a key is not necessarily required but very highly recommended.
Anytime that you are building out a list of elements.
So for my key we don't have an ID and side of these song objects.
Remember each song object only has a title and a duration.
So in this case I'm just going to use the title as the key because it's sufficiently unique for each
song that we're trying to render.
So I'll say key of song dot title and then I'll close off that div.
Then inside of here we're going to first place our button.
Now I know it's kind of strange to write out the GSX for the button first but this just comes down to
kind of how these semantic UI library renders out less.
You'll see that it actually ends up looking really nice at the end of the day.
So I would put down a div here with the class name of rights floated content's the keyword or the class
name floated right there is what gets this div and everything inside of it to appear to the right hand
side of each list item.
Then inside that div I'm going to put a button with a class name of UI button primary and I'll give
it some text of select.
So
then outside of that div with the classroom of right floated content so as a sibling to it I'm going
to put another div with the class name of content.
And it's going to have the actual song title like so.
OK so that's it for our render list method.
Now remember we don't have anything happening when a user clicks on that button just yet.
So we're going to come back to this thing in just a little bit and make sure that we wire up an event
handler to this button so we know that whenever a user clicks on select.
And before we test this out we need to make sure that we actually call the render list method from our
render method.
So here's the render method at the bottom of the file or the bottom of the class.
I'm going to replace song list inside there with the code to render list.
And now I'll save this and we'll flip back over and see how we're doing.
All right so.
Well looks like it's not quite perfect just yet.
We're going to add in a little bit more elements and a couple of different class names here and there.
Inside of both this file in our app component as well to get the list to appear a little bit better
than it currently does.
So first off sudden my render method I'm going to find my div and I'm going to add a class name to it
of UI divided.
List
and I'll save that and we'll test it out again.
All right.
That looks way more reasonable than it did before but now it appears that the entire list is stretching
from the left hand side to the right hand side.
In our original mockup showed it kind of being a little bit constrained in width and it also should
have kind of a margin on the left hand side as well.
So to take care of that we're going to set up a grid system just like we did back on that video.
Now remember the grid system a semantic UI is not the same thing as the CSSA grid system.
So back inside of my app component is the app component.
We're just going to add a couple of elements in a couple of class names to this thing to give our app
a little bit more structure when it comes to the layout of it.
So on this top level div I'm going to give it a class name of UI container grid Eildon Place a div inside
there with the class name of UI row and I'm going to close off the div on the other side of the song
list and I'm going to add in one more nested if you're with the class name of column 8 wide
and again I'll close it off on the other side the song list.
So we've now got three nested divs right here each of which have a class name.
We've got content.
Can you give me your container grid you I row and column 8 wide.
So let's say I'll save this we'll flip back over and that looks way more reasonable.
So it looks a lot more like what we had initially been imagining inside of our Mocca.
OK.
So this looks pretty good.
Let's take a pause right here.
When we come back the next section we're going to make sure that any time a user clicks on the select
button we will somehow select that song and then attempt to show information about it on the right hand
side of her app.
So quick pause and I'll see you in just a minute.