In the last section you finished up our selection reducer so that we are now recording the selected
library whenever one is clicked on.
I think one of the last things we have to do is now take that selected library ID and import it into
a list item and say hey if that selected library is ID is equal to this library's ID then I should show
an expanded card section of view that includes the detail.
So again I have a component where I want to consume some piece of application level state.
Remember how we do that we add on a map state to prop's function and then pass it to our connect handler
down here.
So we will first start out by creating a map state state prop's not state to process excuse me function.
It will be called with our application states and from here we will return a plain javascript object
and that object will show up as props to our component.
So I would return selected library ID and that is going to be state DOT selected library ID.
Remember this state does select to like library id property right here.
It is specifically selected library ID because when I wired up the reducer to my application I assigned
the reducer to the selected library id property.
So because I sign this reducer to this property I now have a selected library ID piece of state.
So here is our map state the proper function it is returning an object.
The last thing you have to do is make sure we pass this map state to prop's function as the first argument
to our connect handler.
So I will pass it in as the first argument to the connect helper call.
So now in theory inside of our component we can compare this ID right here to this dot props dot selected
library ID and if they are equal we should show some expanded amount of detail about this library.
So lets try this out.
I will say Konst should expand equals you know let's do this with like a nice long.
Whats the best way to do this.
Let's do this with a helper function.
How about that.
I think thats going to be the most clear to add on a helper method called render description and we're
going to treat this like some conditional GSX return.
So I will say if this dog props dog library dot ID is equal to this dot Probst dot selected library
ID then return.
And this is where we will put in some additional amount of GSX right here something to say basically
hey here is a description.
So I want to return a text tag.
For right now just a text tag that says
this props library Daut description and because it is a reference to a javascript very well I am going
to wrap it with curly braces like so.
Now of course take notice here that I'm referring to several properties off of our props object which
means this would be a really good candidate for doing some destructuring just to condense down the amount
of references we have.
So let's do that now let's say Konst library and selected library ID should come from the Vistar props
object.
And now I can condense this all down to just Library ID equals select library ID and then inside the
text Dagh will go to just Library dot description.
So make sure you've got library ID select the library ID and library description.
All right let's save this and test it out in the simulator.
Oh you know what actually when I say we got to do we need to make sure that we are calling the render
description method from inside of our render method.
So inside of our render method I'm going to add on a call to this dot render.
Description.
All right.
I think we're ready for a test out in the simulator.
I would refresh clicked on a thing and also we get our nice description in here.
The full length description.
And whenever I click on one and then click on another the previous one closes because I can only have
one selected ID at a time.
OK it definitely works out but the styling is Woof.
That is rough.
That is some rough styling right there.
In addition you know what I'm thinking about this render description help right here and I'm not super
happy about it.
I feel like we could maybe do something a little better than what I've got right here.
Let's continue in the next section and see if we can't refactor this component up a little bit.