Check out a free preview of the full Firebase with React, v2 course:
The "Routing to Document Data" 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 begins constructing a page where the specified post will be placed.

Get Unlimited Access Now

Transcript from the "Routing to Document Data" Lesson

[00:00:00]
>> Steve Kinney: It's in the URL. I need to get at it, right. It's not a prop or anything like that yet. We need to figure out how to get that. React Router has a high order component called withRouter that will take all of this route information and pass it in as props to a given component.

[00:00:20] So we'll go ahead and we'll grab that. So we'll go back to our PostPage, and we'll say, import withRouter.
>> Steve Kinney: And this is not dissimilar from the used context concept, right?
>> Steve Kinney: react-router-dom and all I have to do is wrap this component,
>> Steve Kinney: withRouter. And what withRouter does, and we'll actually write a high order component in a second, so if this is black magic to you, we will dispel the black magic in a little bit.

[00:01:03] We're gonna create one of these called with user in a little bit. That will like basically use our abstraction from before and create the same basic concepts so we can also pass the user in here for when they make comments. But let's go with it for now. Let's go ahead and let's just say console.log(this.props).

[00:01:30]
>> Steve Kinney: These are the props. You can see there is a history which is the browser history API for routing back and forth. The current location,
>> Steve Kinney: Right, it's got the given path name and stuff like that. Match is the one we care about. Because if you look at params, look at that right there.

[00:01:51] That's my post ID. I got it, right? So we can use that now to fetch the post from Firebase.
>> Steve Kinney: Cool, so let's just go ahead and just to make a point.
>> Steve Kinney: this.props, we'll say, match.params.id.
>> Steve Kinney: Cool, there it is. Now we know that we can get it in the component.

[00:02:32] My job now is to grab that prop, hook into Firebase, subscribe to that document, also get its comments cuz that's a sub collection right, subscribe to those as well. And hold on to the references so that we can add comments there, right? And that will be determined by the URL, which will tell us what to subscribe to and unsubscribe to.

[00:02:54] Awesome, I feel good about this. All right, let's give ourselves some helpers. So we're gonna say get postId cuz I don't like typing. He says, hours into this, match.params.id. So there's our postId. Now we can just say this.postId from here on out, which feels a lot better for me.

[00:03:24] We'll say this .postRef, this.get postRef, which is just gonna build on top of that. And it's gonna return firestore.doc,
>> Steve Kinney: posts/. Also, in the storage when you saw me use child, child, child, child, child, that's cuz I was layering a lot of variables in there. I could have done ref and done the same thing I'm doing with this doc as well.

[00:03:54] That would have totally worked. I just chose not to. So we'll do the this.postId, right, which is now based on this one. So that we're not typing all of that in there, we're kind of just building up the things that we need slowly. And with a ref, you can always extend a ref so we can also say this.commentsRef.

[00:04:14]
>> Steve Kinney: Is return this.postRef.
>> Steve Kinney: So you can see, each one of these is kind of building on the last one. .collection('comments').
>> Steve Kinney: Right, so this is really slash post, slash that post ID, slash comments. Right, we're kind of building each one up. And now we can get to the document itself, as well as its sub-collection, and have both available to us.

[00:04:47]
>> Steve Kinney: We'll have the ability to unsubscribeFromPost, unsubscribeFromComments. And we just define them here. I think there's two reasons, one, technically it's like a V8 performance thing, which is that we know the shape of the object. V8 can make performance optimizations over dynamically defining properties. I also like it cuz I feel like it documents what's actually on this class.

[00:05:13] Rare that a performance tweak actually helps.
>> Steve Kinney: All right, so when the component mounts, we're gonna say this.unsubscribeFromPost = this.postRef.onSnapshot.
>> Steve Kinney: const post.
>> Steve Kinney: Let's get that in a way that react likes. Then we'll this.setState({ post }). Let's do, copy that and we'll say comments, commentsRef,
>> Steve Kinney: comments, this is actually gonna have to do a map now, snapshot, because this is an array of them.

[00:06:26]
>> Steve Kinney: All right, so this will go ahead and subscribe to both and on component will unmount. We will unsubscribe from the post, cuz this one, they could very well navigate away from this page. We do need to clean up. For instance, when we're doing it in the application component, or in the providers that were always alive, that was just being responsible and good citizens.

[00:06:47] And you should totally do that, cuz you never know how the refactoring goes. But in this case, we know that the user is gonna navigate away from an individual post. So we need to clean up our listeners in this case. But we should always clean up our listeners, it's fine.

[00:07:03] All right, awesome, so we have both these in place. Let's actually just see if we can go into the react tools. I'll see what I can do with this.
>> Steve Kinney: Go into the post page, so you can see the state, we've got the post. We have all the data about the post.

[00:07:29] Comments is an array of zero items, which makes total sense, we haven't made a comment yet, right? So I'm not totally surprised by that. But looks like we have everything we need from Firebase as it's happening, which is great. Okay, now we actually just need a, like a real UI.

[00:07:53] So we'll say const post comments equals this.state.
>> Steve Kinney: And we'll return, let's call it section. And,
>> Steve Kinney: If you have the post, show me a post.
>> Steve Kinney: Cool, and show the Comments.
>> Steve Kinney: Comment the,
>> Steve Kinney: onCreate. We'll leave that blank for now.
>> Steve Kinney: So let's see if we can get everything on the page.

[00:09:00] That should do the trick.
>> Steve Kinney: Did not like that so I'll just put an empty meth in there for now just make sure it loads.
>> Steve Kinney: Let's skip that for a second.
>> Steve Kinney: Cool, so we can see the post.