-: Last piece of our testing set up
and our application we have to take care of
is that CommentList Component.
So in this section we're gonna start to
kind of flesh out the comment list,
the actual implementation of it anyways.
And then after we have it working
we'll write some tests around it.
So I'll get started by opening up my code editor
and I'm gonna find my CommentList Component right here.
We're going to refactor this component
from being a functional component
over to a class-based component.
The initial implementation that we're going to do
of this thing, is not really going to require it to
be a class-based component, but we are going to
actually add in one extra feature to this application.
And it's gonna have to make this thing
be a class-based component.
So let's just make it class-based right now.
So I'll get started
by defining a class CommentList
extends Component,
and then we'll get Component at the top of the file as well.
Then inside this thing, I'll define my render method.
We're going to assume that this component
is gonna be passed a list of comments as a prop,
so like an array of comments.
And this component is going to have to
render out each one of those.
So I'm gonna place a return statement here with a div.
And then inside that div, we're gonna make a
helper method called renderComments.
That's gonna be responsible for
taking every comment that's provided
as a prop and generating a li element with it.
So I'm gonna place a ul right here.
And then inside that I'll call this.renderComments.
And then I can define my helper method of
renderComments up here.
So inside this thing we're going to map over our list
of comments that's available on the props object.
And for every comment, we'll just return an li.
Pretty basic list building stuff.
So I will return this.props.comments.map
and for every comment,
we will return
an li
that contains the comment, like so.
So do note that we have the curly braces right here.
And one other thing to keep in mind is,
we do have to add a key prop to the li,
'cause we're building out a list here.
In this case, we're going to assume
that every comment we get is unique.
So we'll just use the comment itself as the key, like so.
Okay, so that looks reasonable, at least for now.
Then at the very bottom of the file, we'll be sure to
export this component but not before we hook the component
up to the redux store by using the connect function.
So let's remember to import that
connect function at the top
from react-redux.
And then at the bottom,
we will export default
our connect function, with our comment list.
And then we need to make sure
that we pass connect a mapStateToProps function,
so that we actually get our list of comments in here.
So let's define mapStateToProps.
We'll receive our state
as an argument to this
and then we can return an object
with comments coming from state.comments, like so.
So quick reminder here.
When we pull off this comments property
from the state object, we're specifically saying
state.comments, because back inside of our
reducers index.js file, we had assigned
that commentsReducer to the comments property.
So that's why we are specifically using
state.comments right here.
So this object is gonna show up as props to our component
of CommentList, which is why we are able to
reference this.props.comments right here.
All right, so I think the last thing we have to do,
is to make sure we pass mapStateToProps
to the connect function.
So I'll do mapStateToProps
and that should pretty much be it.
So let's quickly flip on over to the browser.
We're gonna make sure that we are able to see
our list of comments appear on the page,
'cause as far as our application itself goes,
at this point it's basically fully functional.
So if I go back over to the browser,
after getting this thing to load up, there we go.
I should be able to enter in some comment right here,
click submit, and then see it appear on the list.
So this definitely looks fine.
Let's take a pause right here.
We'll come back in the next section
and we're gonna start working
on some tests around our comment list component.