-: So we've finished flushing out
our comment list spec.
All we need to do is finish
our comment list component.
We are building a full React
redux application here.
So we're going to assume
that our comment list is going to get its list
of comments from application level state.
That means that we're going to have to
turn this comment list component
into a container.
Remember, a container is a react component
that has access to application level
state through redux.
To turn a component into a container,
we have to first import the connect helper
from the React Redux library.
So we'll import connect from react-redux.
And then at the bottom at our export statement
we'll do connect one set of parens,
and then we'll wrap comment list
with another set of parens.
Remember,
the first argument to the connect function here,
is a function called map state to props.
Well it can be called anything,
but that's what we call it by convention.
And then in the second set
of parens is the component that we want to wrap.
So let's define our map state to props function.
We'll do function,
map state to props.
This gets called with state.
And from here we'll return comments,
state.comments.
Now we're making a very large assumption here.
We're assuming that we are going to have
a comments piece of state.
We have not yet created a reducer
for comments just yet.
So this right here is always gonna come back
as undefined right now
and we'll fix that up in just a second.
So map state to props needs to be passed
to our connect function.
So we'll say map state to props like so.
And so, now, when we've got our list
of comments coming from state,
we'll have our props for our comment list
have access to props.comments.
So we can iterate over that list of comments
and build a list of li's,
and then stick it into our UL right here.
So on a line above it, we'll make a, we'll just
build the list separately and then stick it
into the UL right here.
So we'll say const list is props.comments.map.
And then for every comment we have,
we'll return an li
and inside that li we'll have our comment.
We'll also put in a key
and we'll just use the comment
for that as well.
This will be a little bit misleading if anyone
starts making comments with the same text,
but for the purposes of this sample app,
it'll do for now.
So we've got our list.
All we need to do now is stick it into the UL,
like so.
Okay, very good.
So I'm gonna save this and you'll see
that our console immediately starts
throwing some errors.
Cannot read property map of undefined.
So this is a little bit of a side effect from us
trying to get access to this state.comments right here.
We can do a little fix here and we'll talk more
in a little bit about why this works.
But if we go over to the reducers folder and open
the index file, then we're just gonna change
this state key right here to comments.
And instead of returning a object by default
we'll return an array by default.
So if we save that, boom, everything goes green.
So again, we'll talk about why we had
to make this little change here
when we start touching the test helper,
in a little bit.
Let's go through our comment list one more time.
Again, I'm, if you're in this course,
the the thought here,
the hope is that you've already gone
through stuff like connect and react redacts,
and making stuff into a container,
but none nonetheless, let's do one quick review
just in case it's still rusty.
So we had our comment list,
which we wanted to show a list of comments.
We're assuming that we're going to end
up with all of our comments.
You know, everything that a user enters some text
in and then presses the save button.
We are assuming that that list is going to end
up on our application level state.
So in order for our comment list to have access
to that application level state,
we have to turn it into a container
and we do that by using the connect helper
down here.
Okay, so let's look at the specs one more time.
We said it shows an li for each comment.
Found every li length equal two.
And we also said that for each comment
we can find that text within the component.
Very good. If we say change some text in here.
So we can put in 1, 2, 3, 1, 2, 3
and we'll see the specs start to fail,
just what we want.
We can also go over to our component.
And let's say
if you know someone starts doing some refactoring
and they accidentally delete
the class name entirely.
Well then we start getting a failure saying,
Hey we expected the comment list class
to exist somewhere within the app.
So, this is really our specs
in practice right here.
We could start doing some refactoring
if we wanted to.
And because we've got these really robust
very flexible specs, we'd be good to go.
So this is looking pretty good.
This is, you know, the majority
of stuff that we need to do for
the react side of things.
From here on out,
it will almost all be the redux side
of things and we're gonna be writing tests
for that as well.
So let's get started
on the redux side of things in the next section.