In the last section we were able to print out the currently selected song from our song detail component
by hooking up the connect function to it.
So now we need to somehow customize what the song detail is going to render out based upon the song
inside that props object.
Now before we do one quick thing I want mention though to set our props object has a key of song and
the song has a value of the actual song object right there.
We see the key of song right there only because that is what we had returned from our map state to prop's
function.
So right here is an object that says song that key right there is where this entire object I should
say is what is going to eventually show up as our props object inside the component.
So if we wanted to we could rename that key right there to something like my selected song.
And then if I saved this and foot back over you'll see that the props object has now changed and it
now says my selected song.
And when I actually select a song yet there we go.
All right.
So if you ever want to customize the key that shows up inside your props object.
You do it right here inside a map state to props.
But for us having simply a song like so is totally appropriate for what we are doing.
OK so now back inside of our component itself I'm going to move the console log now inside of here.
I don't really want to have to refer to prop stot song title.
A whole bunch.
And then like you know props start song duration over and over again.
So instead of receiving the entire props object I'm going to structure out just the property we care
about just the song property like the it's now inside of here.
I should be able to reference song title and see the title of the song printed on the screen.
So if I now flip back over I'm going to see an error message.
All right.
So cannot read property title of No.
Why are we seeing this.
Well remember when we first render out our component on the screen we do not yet have a selected song.
And in fact the selected song Piece of state inside of a redux store starts off as no.
So we're trying to read the property title on a value of NULL to fix this.
All we have to do is add in a little check inside of our component.
I'm going to say if song does not yet exist or if it's a null value.
So notice the exclamation right there.
Then I want to return something that tells the user that they need to select something in order to actually
see some content appear on the screen.
So I'll say something like select a song like so now if I flip back over the air goes away and I see
select a song.
And so now my user knows that they need to actually click on something and then we can show out the
actual title of that song.
And I can select another one and see all the different titles appear cool.
All right so now we're going to improve the styling of this component just a little bit.
So I going to turn this into a multi line GSX expression as we've done many times before.
Don't forget to clean up the semi-colon on the end of that line.
And then I'll give myself a little bit of space here.
All right so on the Stiv I'm going to put on a class name of actually you know class name here.
I take that back.
We don't need a custom here we're going to put that class name somewhere else.
So at the top I'll put in H three and all say details for.
And then after that I'll put a simple P-TECH and I'll say title I'll put my song title in there like
so and then how about right after that we'll put
our duration and I'll do a song that duration.
All right so it looks pretty good.
Let's try flipping back over and see how we're doing.
Yes.
And now by default I select a song if I click on select it says details for and it's kind of scrunching
up the title and duration together so I can either wrap these in separate tax or get put in a simple
break line like so now they should render on separate lines.
There we go.
So I've got my title and my duration right after it and I could select all these different songs and
see details about the appropriate song appear on the screen.
All right.
This looks pretty great.
So that's pretty much it for how we integrate react in redux together.
The big lesson here is that we're still going to create our components as we usually do.
We're going to then select some very specific components inside of our application that need to receive
some information or need to make changes to our state if we need to make changes to our state or receive
information.
We're going to import that connect helper and then at the bottom of the file we can define a map state
to prop's function will then pass that function as the first argument after connect and it'll put on
this kind of weird syntax here where we put the song detail or the actual component that we care about
as a second function call next to the connect call.
Now in total I would say that this application was of course pretty simple and basic.
So let's take a pause here.
We're going to do an exercise or two in the next video and then after that we're going to very quickly
start to work on some much more complicated redux applications.
So quick break and I'll see you in just a minute.