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
This challenge will give you a great opportunity to practice what you've learned so far about context.
Resources
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
We've covered a lot of material so
far, and
0:00
you're ready to create
a context on your own.
0:02
There's still some prop
drilling happening in the app.
0:06
And I'd like for you to create a new
context to hold all the state that
0:09
controlled the theme of the app.
0:13
Let's go over what you'll need to do.
0:16
In this challenge, you're going to create
a new context called themeContext.
0:19
This context should provide
the isDarkMode, accentColor, and
0:25
fontPercentage states and its helper
functions to the component in our app.
0:30
Try to make your provider
a higher-order component, so
0:37
that you can move all the state and helper
functions into the theme context file.
0:41
As a result, our main app component
will just be responsible for
0:48
rendering the components.
0:52
With your provider all set, next you
should provide the Header, UserSignIn,
0:54
AccentColor, DarkMode, and FontSize
components access to the theme states.
1:01
You can either use the context consumer
tags or the useContext hook.
1:09
If you need help along the way, take
a look at how we wrote the UserContext.
1:16
This challenge is a great way to
practice what you've learned so
1:22
far about React context.
1:25
In the next video,
I'll show you how I did it.
1:28
Good luck and have fun.
1:31
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