Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Context API!
You have completed React Context API!
Preview
Now that context is set and the provider is in place, we'll provide state to the entire app. We'll set up Consumers that subscribe (or connect) to the Provider component to make use of the context.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In the previous video, we wrapped the
children of App in the provider component.
0:00
The provider usually lives at the top
level of your app, and that's what's going
0:05
to provide the actual data that needs to
be shared throughout the component tree.
0:10
The provider component requires
a value prop to share data.
0:16
The value can be anything, but
it's usually the application state and
0:21
any actions or
event handlers shared between components.
0:26
Let's pass the provider's
value prop an object.
0:31
Inside the object, we'll pass in
our data with a set of properties.
0:35
I'll add a property named user and
this will represent the user state.
0:40
Then we will set its value to
the user state with user to
0:48
make the object more concise.
0:52
Whenever a key and value name match,
we can use the ES2015
0:55
shorthand syntax by
writing just the key name.
1:00
We can write the user property and
value as just user.
1:05
In React DevTools,
notice how Context.Provider now
1:10
holds the user state and its value prop.
1:15
Right now the user is null
because no one has logged in,
1:19
but once the user logs in, like so,
1:24
The value will contain
the user information.
1:31
Any component that's a descendant
of the provider will have access to
1:35
the data given to the value prop.
1:40
The way you access that
data is with a consumer.
1:43
The provider provides a context and
the consumer consumes and
1:48
subscribes to that context.
1:52
A single provider can be
connected to many consumers,
1:55
no matter how far down they
are in the component tree.
1:59
Let's start by providing
context to the Nav component.
2:03
There are two different ways to read
context, with the consumer tags or
2:09
using the useContext hook.
2:14
Using the consumer tags is
the old way to read context.
2:17
And is mostly used to read
context in a class component.
2:22
Let's import the user context with import
UserContext from contextUserContext.
2:26
Then in the function's return
statement we'll use the consumer
2:35
component by adding opening and
closing consumer tags.
2:39
To render anything inside the consumer,
2:47
you use a pattern in React
called a render prop.
2:50
Render Prop refers to a method for
2:55
sharing code between React components
using a prop whose value is a function.
2:57
A component is provided a prop,
3:03
which takes a function that
returns a React element.
3:06
You can learn a whole lot more about
render props in the resources listed in
3:11
the teacher's notes.
3:15
This pattern is also called
function as a child.
3:17
Because instead of passing a prop,
you're also able to write
3:21
a function inside the opening and
closing consumer tags.
3:25
The function returns the part
of the UI you want to render.
3:30
We'll use a function that returns
the Nav UI inside the consumer.
3:35
This function is required and
needs to be placed inside a JSX expression.
3:40
So let's add a set of curly
braces inside the consumer tags.
3:47
Then the function will render
something based on the context.
3:52
The function takes the current context
value as a parameter and returns JSX.
3:57
This parameter is commonly named value or
context, I'll name it context.
4:04
The context parameter passed to the
function will be equal to the value prop
4:10
of the provider.
4:15
In other words, the data we parse
into the provider's value prop
4:17
is made available here via
the context parameter.
4:22
The consumer is now subscribed
to any context changes.
4:27
Now we're able to access the user data
directly from within the Nav component.
4:32
In the body of the function,
I'll add the return keyword,
4:38
any set of parentheses to wrap the JSX,
4:43
then move the entire Nav UI
inside the return statement.
4:46
I'll format the document
like I did before.
4:51
We can now replace props.user
with context.user.
4:56
Since we're no longer passing the user
state to the Nav component as props,
5:03
we can delete the props parameter.
5:09
In Header.js,
we can delete the user prop passed to
5:12
the Nav component because
it no longer needs it.
5:17
In App.js, the user state no longer needs
to make its way through the Header.
5:21
So we can also remove the user prop
passed to the Header component.
5:29
The Nav component is displaying
the correct links depending on if
5:35
the user has logged in or
not, just like before.
5:39
Instead of props,
5:44
it's now getting the user data from
the provider via the consumer.
5:45
So anytime there's a change in the user
state, the consumer gets the data and
5:51
needs to update the UI from the provider.
Alright,
5:57
let me now show you a simpler way to
read the context using React hooks.
6:01
In Nav .js,
let's import the useContext hook
6:07
from React with import
{ useContext } from "react".
6:12
the useContext hook
returns the context value.
6:18
So let's declare a variable named context
and set it equal to the useContext hook.
6:24
We need to provide useContext,
the context we want to subscribe to,
6:31
so let's provide UserContext.
6:37
Now, we can delete all the code
that we wrote for the consumer tags.
6:41
And as you can see, the useContext
hook requires less lines of code,
6:51
and it looks much simpler.
6:56
Since the context is an object,
we can destructure
7:00
it by replacing context
with { user }.
7:05
And in the return statement,
we'll delete context from context.user.
7:11
Let's save and
make sure our our app is still working.
7:17
Let's refresh the app and log in.
7:22
And we see the navigation links
update when we log in, great.
7:28
Now that you've learned
how to use a consumer and
7:34
access context set by the provider,
why don't you pause the video and
7:37
add a consumer to the Home and
Settings components?
7:42
The Home component checks
if a user has logged in.
7:47
If so, it will display the user's
username with a message,
7:51
"Head over to Settings to
change up your preferences."
7:55
Or, if the user hasn't logged in,
home will display the message,
8:00
"Welcome to the Main Page,
please Login to Continue."
8:04
The Settings component will only
display if the user has logged in.
8:09
The useEffect will redirect
the user to the signin route if
8:14
the user hasn't logged in yet.
8:18
Alright, let's get started.
8:21
In Home.js,
let's import the useContext hook and
8:23
the UserContext with import { useContext }
8:29
from "react" and
8:34
import UserContext from
"context/UserContext".
8:37
At the top of the Home component,
8:44
we'll read the UserContext with const { user }
8:48
= useContext(UserContext).
8:54
Now we can replace
props.user with just user.
8:58
And in the h1, tag we'll do the same and
9:05
we'll change props.user.username
to just user.username.
9:08
Since we're no longer passing the user
state to the home component as props,
9:16
we can delete the props parameter.
9:21
In App.js, we can delete the user
prop pass to the Home component,
9:25
because it no longer needs it.
9:30
Now let's do the same for
the Settings component.
9:34
We'll start off by adding useContext
to the React import statement,
9:38
then we'll import
the UserContext with import
9:45
UserContext from "context/UserContext".
9:49
At the top of the Settings component,
9:54
we'll read the UserContext
with const{ user }
9:58
= useContext(UserContext), and
10:03
we'll replace props.user in
the useEffect with just user.
10:07
For the settings component,
we won't delete the props parameter,
10:15
since it's being used to
retrieve other states.
10:20
In App.js, we can delete the user
prop passed to the settings
10:24
component because it no longer needs it.
10:29
Most of the app is now accessing
the user data from context.
10:34
In the next video, we'll pass user's
event handlers to the provider, so
10:39
that we're able to access and
invoke them from inside other components.
10:45
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up