Firebase with React, v2 Firebase with React, v2

Rendering Documents to Component State

Check out a free preview of the full Firebase with React, v2 course:
The "Rendering Documents to Component State" 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 maps over the posts collection to display the data in the app.

Get Unlimited Access Now

Transcript from the "Rendering Documents to Component State" Lesson

[00:00:00]
>> Steve Kinney: That's cool, now what we'd like to do is actually show it on the page cuz console login and stuff from a database does not an application make. So, let's go ahead and we're not, we're gonna use the snapshot.docs instead now. Now, you could theoretically put an array up here and do everything and then use stuff afterwards.

[00:00:20] In real time database, you had to do that, but what we have here is snapshot.docs, and that's an array that we can map over. And, as you saw before, let's go back over real quick and look, is I have that ID, and in the data, I just have the fields.

[00:00:40] Now, so it's not my first react out, I know what's about to happen to me is I'm going to then try to make a bunch of post components and what's gonna yell at me? It's gonna want a key for every single one of them, right? Fine, so I would like to include, that ID with the rest of the data.

[00:01:00] That's just going to take a little bit of JavaScript foo, no big deal. So what we’ll do is we’ll say .map, we’ll say for each document, go ahead and return me a new object that is the idea will be doc.ID. And, then you can go ahead and take all the other properties from data and spread them out.

[00:01:33]
>> Steve Kinney: Cool, and so that, we'll actually store that as post. This will now be a bunch of post objects. We're gonna use an array right now cuz it is simpler to reason about for a lot of our purposes as we learn firebase. But, I feel really strongly that arrays are the devil.

[00:01:49] And, key value stores are better, but they'll add a little bit of complexity. In reducts, it's usually better to store them as an object so you can easily remove stuff and get stuff out of the database, but we'll go with this. We'll have to do some array filtering and mapping in a little bit, but it'll be fine.

[00:02:04] And, we'll do this.setState.
>> Steve Kinney: Posts. All right, so we're going to await the firestore collection, we'll get all the things out of there. Then, we'll go through the snapshot of the database. We'll map them into objects that will not get me in trouble with the virtual DOM. And, then, we will set the state of our application.

[00:02:38]
>> Steve Kinney: So, you can see I had those, like, dummy ones that were in state for a second there, and then, they are replaced by what was in the database. Just to make you believe that I'm honest, let's make one more. We'll do title Steve is honest, and the content will be I told you.

[00:03:04]
>> Steve Kinney: Make this a map.
>> Steve Kinney: Display name not Steve.
>> Steve Kinney: The uid will be,
>> Steve Kinney: That's totally legit.
>> Steve Kinney: Didn't save for some reason. It's really important that I make one about how I'm honest, and then have it not save.
>> Steve Kinney: All right, there it is.
>> Steve Kinney: Hit refresh, and there it is.