Firebase with React, v2 Firebase with React, v2

Creating a React Context Consumer

Check out a free preview of the full Firebase with React, v2 course:
The "Creating a React Context Consumer" 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 wraps the top level component into the provider to ensure that other components can hook into it, then wraps the posts in the consumer as well to create a more modular application.

Get Unlimited Access Now

Transcript from the "Creating a React Context Consumer" Lesson

[00:00:00]
>> Steve Kinney: Right now, our application still works, cuz everything is in Application, still. But what we'll see that we can do is, first, we need to wrap some higher-level, some top-level component in the provider itself, so things can hook into it. So I'm just actually gonna go to index,

[00:00:22]
>> Steve Kinney: I'll wrap the application, this is very similar to, if you use Redux React.
>> Steve Kinney: Cool, and now,
>> Steve Kinney: With the actual posts,
>> Steve Kinney: We can pull in that PostContext,
>> Steve Kinney: And instead of passing the post in, we don't need to do that anymore, cuz they previously had to get passed in from the application.

[00:01:03] Now we don't have to pass them into the application, cuz any component can hook in to that state, right? And so if this became a giant application, with a tree that was 17 levels deep of components, and only the components 16 levels down needed the post? Fine, we don't have to pass it through the other 16 levels, right?

[00:01:22] And this is a really great pattern for using with Firebase, cuz now we can create these things totally separately. And in the same way that we were able to add stuff into the database from anywhere in our application. We can also now consume posts from Firestore, as well.

[00:01:37] So we'll go ahead, we don't need the posts from there anymore, we'll go ahead and we'll say,
>> Steve Kinney: PostsContext.Consumer,
>> Steve Kinney: And that will actually pass in some posts that we can use.
>> Steve Kinney: So now, we get to do everyone's favorite thing, let's first make sure the app didn't completely break.

[00:02:26]
>> Steve Kinney: [SOUND], insufficient or missing privileges,
>> Steve Kinney: Rule errors was not the bug I was expecting when I flipped back over, so that's awesome.
>> Steve Kinney: All right, they look like they're going in now, maybe that was possibly an older error, we'll see. So let's go ahead to my data,

[00:03:10]
>> Steve Kinney: Yeah, there's a new one, all right, they're going to the database. Not quite sure what the rule issue was, but logging out and logging back in solved it, so we can try it out.
>> Steve Kinney: Yeah, so you go in, I'm just not seeing them on the screen yet, which is okay, we can debug that.

[00:03:40] So those curly braces, they don't return.
>> Steve Kinney: New errors are good errors,
>> Steve Kinney: posts,
>> Steve Kinney: Looks like an extra closing brace, and now we should be good, cool, so there's my posts. To review what the error was, is in JavaScript, if a arrow function has curly braces around the body, you need to use a return statement.

[00:04:31] If it doesn't, then it takes that one line and returns it. In the refactoring and coding, I left an extra set of curly braces in there, which meant it was returning undefined. And so simply by actually writing correct JavaScript, my bug solved itself.