In the last section we added in a render description helper that would figure out whether or not the
library was currently selected and if it was it would return the library's description and that definitely
had good results inside of our simulator.
But you'll notice that this thing Wolf it's kind of rough right now.
It could definitely use some styling on that thing.
In addition I want to point out that our runner description method right here you know there's something
about it that just makes me really unhappy and that is in this.
Like Tiny helper method right here that nobody is ever really going to look at.
We make this very critical decision like this statement right here.
This statement this very critical decision where we say if this library is currently selected then do
this thing.
And so I've got this very critical logic that's just kind of tucked away inside of my component.
I would feel a lot better about this component's design if we instead just passed in a single prop of
something like You know I don't know expanded like this got prostate expanded.
And that would be either true or false.
And that would determine whether or not I want to show the library's description.
So what I'm seeing here is it would be really nice if I could pull out this logic here the logic to
decide whether or not this component is expanded to some other location.
It would just allow my component to end up being that much simpler.
So I think that would be a great place to start inside the section.
I want to relocate this logic right here to decide whether or not this component is selected.
And so you might be ask yourself Was Stephen where we are in the world else would we do that.
We can't you know we could do it in the parent but you know is that the best place for it then the parent
just knows about whether or not this thing is selected.
I don't know.
Well I'm going to suggest maybe the best place to do this would be in the map state to prop's function
right here because this component doesn't really it doesn't really care about what the meaning of selected
library idea is that component just cares about whether or not it should show the expanded view.
So I want to modify my map state to proper function to only pass in a prop of like expanded so like
expanded true or expanded false.
So you might be thinking that that's not going to work the math into proper function.
It's only called with the state object.
How are we going to know like which particular library we're talking about here.
Well fortunately what I'm really trying to lead up to here is the map state departs function is called
with a second argument that by convention we call own prop's.
The second argument here that we call own props are the props that were passed to the component that
we're wrapping.
So in our case the list item component when it is displayed on the screen by the library list it is
passed in library right.
It is passed a library which is why inside of here we reference this Propst library this own props function
or own props object right here is exactly equal to this art props inside of the component.
So any props that we pass into this list item component will show up inside of map state to props as
own props.
I'm sure this is a little bit confusing.
Don't sweat it.
This is another one of those topics that we're going to come back to many many times.
So I'm getting access to own props inside of that state the props I can do some amount of kind of like
pre calculation or pre-determination to figure out exactly what props I want to pass down into my component
and what it really allows me to do is remove all logic from my component entirely.
And that's exactly what I want to do.
So inside of that stage props I'm going to create a new variable called expanded and expanded is going
to be state DOTs selected library ID.
And if this is equal to own prop's dot library ID then expand it will be true.
Otherwise if they are not the same expand it will be false.
And then finally instead of having to communicate to the component what the currently selected library
ideas I can just say whether or not it should be expanded.
And because my key and the value are identical I can advance this down to just expanded like so.
So the net result of all this the net result is that I have pulled some amount of logic out of my component
my component no longer has to worry about this.
You know the meaning of selected like the ID component can just look at this expanded flag and decide
whether or not it should show the description.
So now we can refactor our code inside of Rand's description and just say instead of looking at selected
library ID I can just look at expanded and expanded is true.
So if expanded then chosen text otherwise do not.
And that's pretty much it.
So I know that this is probably a very subtle distinction here.
You might be thinking Stephen what is the difference between deciding inside the components self whether
or not this thing should be expanded versus placing that logic inside of map stage props.
Well yes in this case is a very small distinction and we probably didn't save ourselves too much by
just allocating this one line of logic down to map state to prop's but I can guarantee you that on more
complex components this type of consideration right here you know this type of kind of Prete calculation
of props to pass down to the component can be extremely helpful.
So the intent here is not necessarily for our application to really save the day or anything like that.
The intent here is to just let you know that your map state the proper function is called with the components
props.
And you can use that to do some type of pre-calculated here.
OK let's do one last test.
Make sure this all works.
So refresh my simulator and yup I can still Heider show all my descriptions.
So I think the last thing we have to do is make sure that these text descriptions are smiled a little
bit more nicely.
So let's take care of that in the next section.