Check out a free preview of the full Firebase with React, v2 course:
The "Adding Comments" Lesson is part of the full, Firebase with React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates how to nest documents with subcollections by adding comments to the posts.

Get Unlimited Access Now

Transcript from the "Adding Comments" Lesson

[00:00:00]
>> Steve Kinney: We've got a comment form. It doesn't do anything yet because we have a no out function in here for uncreate. So we'll say,
>> Steve Kinney: createComment.
>> Steve Kinney: console.log(comment).
>> Steve Kinney: We'll use that down here just to make sure it works.
>> Steve Kinney: Let's go back to my console.
>> Steve Kinney: All right, let's take a look at the createComment cuz it's definitely clearing it out and doing something.

[00:00:56] I think we might have to actually call the onCreate, let's see. Comments pass this onCreate. Cool, so we'll just say this.props.onCreate. Now, what we can do here? If we have the post ID, we could pass it all the way down like we were doing in the post before where we weren't passing functions from the application all the way down.

[00:01:20] We could totally refactor and do that. But let's get it working, and then we can decide to do that.
>> Steve Kinney: Cool, so it looks like I've got some fun things here which is an error missing or insufficient permissions. I'm not totally sure where that's coming from yet, but I know that I don't have the ability to actually make comments.

[00:01:49] So that's a thing. I also likely don't have the ability to read comments, right, because we never made that security rule. [LAUGH] So it is very likely that me trying to get the comments is not a thing. Again this is why sometimes, like, we'll leave it wide open, when we're first developing.

[00:02:15] So if I just go ahead and we comment this out,
>> Steve Kinney: There is no error now so now we know what the problem was. The problem was we don't have permission to read comments, so let's go ahead and fix that. We'll go to rules, this time for the database.

[00:02:42]
>> Steve Kinney: Remember we saw earlier when discussing security rules that we can nest them, right? So we say match /comments/(commentId). And I think anyone can read them. That seems fine. And,
>> Steve Kinney: Yeah, if they're logged in, go for it.
>> Steve Kinney: All right, no more error.
>> Student: Is it possible to add the star, like everything after that line?

[00:03:24]
>> Steve Kinney: Yeah, I could totally do that. I [CROSSTALK] My heart says don't.
>> Student: Yeah, yeah.
>> Steve Kinney: I don't know how that could totally, cuz I could make all sorts of weird collections, right? I tend to keep it super restrictive, but yeah you could. All right, so we've got comments there.

[00:03:47]
>> Steve Kinney: CreateComment, so that would be what? This.commentsRef, this is why it's nice to just cache them somewhere and give yourself shortcuts, this.commentsRef.add. And we'll say all this stuff from the comment I really need the user to know the rest of that information, right? I don't have access to the user in here.

[00:04:14] And then you'll point it out, we have all this neat stuff for used context with a functional component. But we don't have a way to get the user. We have ways, but we don't have a really nice way to get the user the same way we did in those functional ones before, but there's inspiration in this withRouter, right?

[00:04:33] If that can give us all the route information, imagine one that could give us all the user information. So we're gonna start with just that.
>> Steve Kinney: Just an empty, a comment with no author and see how it goes for us.
>> Steve Kinney: Right, cool. I have default props that are just filling in the rest of it, so it's not like there was magic in there.

[00:04:57] It's just that, if nobody passes in a username, I chose Bill Murray. Mostly for the site philmurray.com which is like placeholder art that is all Bill Murray. Cool, so we can see we can make comments now. I wanna check that out in the database real quick.
>> Steve Kinney: You see posts and now posts can have comments.

[00:05:22] Comments can have content, right? So we can kind of keep nesting down and see that all in Cloud Firestore as well.