Skip to content
card background pattern
Level 2

Custom React Hooks

Unlock Full Course

$49.99 $24.99



Custom Hooks for Context Providers

Here we will continue using the context example from the last video and show you how to make a custom hook that can automatically dive into any specific context provider.



User photo avatar
updated 3 months ago

@Chris You could add X items to the context object (the one we've previously created with createContext) that will handle each cards state and then setting your isNavOpen(I would change the name of the context at this point) to its respective object item value. Another option will be to create a separate context for your cards, simply depends on your app requirements. Remember that context is global for the application so no matter where you change it the value will change for every place where it has been called without exception. Hope this is of help

updated 3 months ago

Hi, I need to send an ID along with the toggleMenu?. I used to do this like the below example. Trying to re-factor so that i can open certain 'item' cards from anywhere in my app but with useContext i get every item in my app opening at the same time.

<button onClick={() => setIsNavOpen(true)}>Click me to open component<button>

<Component id={} isNavOpen={isNavOpen} setIsNavOpen={setIsNavOpen}/>

....I really hope that makes sense

User photo avatar
3 months ago

@Ed Thank you for sharing the correction

5 months ago

Yep "useAppContext" just confused me while watching the video. Thanks for the comment Ed, glad I didn't miss something.

Other than that, loving the course so far, thanks Scott! This is my first taste of Level Up Tutorials and it's well taught and super easy to follow.

7 months ago

Hi Scott, There is a bug in the download for this lesson. In Menu.js you need to change "useAppContext" to "useAppState" in two places, lines 2 and 5.

This is a great technique for state management.


Something to say?

Become a Pro