Check out a free preview of the full Complete Intro to React v4 course:
The "React createContext" Lesson is part of the full, Complete Intro to React v4 course featured in this preview video. Here's what you'd learn in this lesson:

Create a new search context with React.createContext. This gives you both a Consumer and a Provider, that acts as a portal to put data into the Provider and it comes out in the Consumer.

Get Unlimited Access Now

Transcript from the "React createContext" Lesson

[00:00:00]
>> Brian Holt: So before I showed you how you would solve this without context, right? But what we're gonna do now is we're going to solve this with context.
>> Brian Holt: So make a new file here.
>> Brian Holt: And call it search context.js.
>> Brian Holt: Okay, Import React from react. The problem that we're going to solve here is that we have the location, the animal and the breed, and we need to read that from the search params page and then use it to search on the results page.

[00:00:42] So what we're gonna do here is we're gonna say const SearchContext = React.createContext. This is a new method with React that's going to create two components for you, a provider component and a consumer component, right? The provider is going to make everything available underneath it, and the consumer is going to read from the provider, no matter how much distance there is between it.

[00:01:10] So it's kind of magical, right? There's a magical connection between the two, that React is going to provide basically a portal of data that you put data in one side and it will come out the other side. So the provider is like the entrance to the portal and the consumer is the exit from the portal, okay?

[00:01:27] And then here, you're gonna describe what your data looks like. So I'm gonna be tracking location, and then you'll give it your default value, so I'm gonna say Seattle, WA, animal, empty string, breed, empty string, breeds empty array. And then not only that, I'm gonna give it the ability to modify this context, right?

[00:01:57] So I need to give it the methods so that people can actually on the consumer side, components on the consumer side can modify that data. So we're gonna give it those handle methods, handleAnimalChange and these are just gonna be empty functions for now.
>> Brian Holt: HandleBreedChange, handleLocationChange.
>> Brian Holt: And get breeds.

[00:02:37]
>> Brian Holt: So what these are, these are actually kind of dummy methods. You'll use these if you're doing testing, but these are actually not the real implementation of these methods. But you're just describing to React what these look like. This is useful because later we'll be able to reference inside of this component.

[00:02:51] It's like this is everything that's gonna be stored inside of this context.
>> Brian Holt: All right, and then we're gonna do export two different things. Export const provider = SearchContext.provider. And export const consumer = searchContext.consumer. So these are named exports. So I have to go into search contacts and import provider from there.

[00:03:25] So they're specifically being exported that way.
>> Speaker 2: Why do you choose to set your functions in that way versus sending them so do get breeds colon and then empty prints rackets?
>> Brian Holt: I think less characters.
>> Speaker 2: Okay, I just thought if you have to worry about binding or anything like that.

[00:03:47]
>> Brian Holt: No, they're just dummies. They're letting future people know that these are just methods, right? So they're not doing anything. The real reason for this is what's inside of here, this is what gets put on the context if no provider is there which you shouldn't do. You shouldn't ever use a consumer without a provider being above it.

[00:04:12] That's really what happens. So that's only really useful for testing purposes.
>> Brian Holt: And later, this will be really useful for typescript because this is how typescript knows this is what's going to be on your context.
>> Brian Holt: So now we've created context, right? This is how you create context.