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
It's common to pass the Provider's value prop an object to store multiple properties in state, as well as any actions you want to perform on the data.
This video doesn't have any notes.
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
You've learned how to read from
the state provided by context,
0:00
but you can also pass functions
that modify that state.
0:05
That way consumers can respond to
user interactions with state updates.
0:09
It's common to pass the providers
value prop an object to store
0:15
multiple properties in the state
as well as any event handlers or
0:20
actions you want to perform on the data.
0:25
Currently, our event handlers are
distributed to child components via props.
0:28
For instance, the signInUser and
signOutUser functions
0:34
defined in the App component
are passed to the UserSignIn and
0:39
UserSignOut components respectfully.
0:44
The props passed to each component
acts as a callback function
0:48
that's called at a later time
to change a piece of the state.
0:52
So let's start by providing
the signInUser function
0:57
along with the user state
directly to a consumer.
1:02
In App.js to pass a function
down through context,
1:06
I'll add a new property named actions,
which will equal an object.
1:11
And I'll store the signInUser function
in a property I'll name signIn.
1:18
The value should be
a reference to the function,
1:25
so I'll set it to signInUser.
1:30
In the UserSignIn.js file,
we can consume this
1:33
action by first importing
the useContext Hook and
1:38
the UserContext with import
useContext from React and
1:43
import UserContext from
'../context/UserContext'.
1:49
At the top of the component,
1:55
let's read the UserContext with const
1:58
context = useContext(UserContext).
2:03
Let's call the signInUser function
that's coming in through context.
2:08
We stored the function in an action
object in a property named signIn.
2:14
So we'll call it with
context.actions.signIn.
2:21
We can also destructure
the object by replacing
2:27
context with curly braces, actions, and
2:32
remove context from
context.actions.signIn.
2:37
We're no longer passing signInUser
to the UserSignIn with props.
2:42
So in App.js, let's delete the signIn
prop from the user signIn tag.
2:48
I'll also adjust the sign
in route to be on one line.
2:55
All right, let's do the same for
the signOutUser function.
3:06
Let's add a new property to
the actions object called signOut and
3:11
set its value to the signOutUser function.
3:17
In UserSignOut.js,
we'll import the useContext
3:24
Hook in the UserContext with
import useContext from react and
3:30
import userContext from
'../context/UserContext'.
3:36
At the top of the component,
let's read the UserContext with const,
3:43
{ actions } = useContext(UserContext).
3:50
We stored the function in an actions
object in a property named signOut.
3:58
So we'll call it with actions.signOut.
4:06
We can delete the props
parameter since the userSignOut
4:11
component will no longer
be passed any props.
4:15
Lastly, in App.js, let's delete
4:19
the signOut prop from the userSignOut tag.
4:23
We just changed and
deleted quite a bit of code.
4:28
So let's test the app to make
sure that the sign in and
4:32
out functions still work as expected.
4:36
Let's navigate to the Sign In route.
Once we logged in,
4:39
we see that the nav links have updated and
we see the welcome message.
4:46
Let's now click the Sign Out button.
4:52
And it signed us out.
4:54
Great, our app works as expected.
4:55
The user data and the user actions in our
app are now entirely managed with context.
5:00
Up next, we'll begin to refactor parts of
our app to make the components cleaner and
5:06
more maintainable.
5:12
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