This project was bootstrapped with Create React App.
Lessons 1 - 8 from the React Context & Hooks Tutorial Playlist by The Net Ninja
- You can use .Consumer in functional components.
- You can consume multiple contexts in one component.
- You can add functions to your Context.Provider
- Pass it down along with state state in the provider.
- Destructure the function out of the context.)
- (Add that function to a component using the context.
- Then we should have access to this function in any component that consumes the context.
- Render the component somewhere. :)
- Yes, you can have multiple contexts, best broken up into seperate files.
- Remember that each consumer will be expecting a function(that takes a context object) that returns some JSX.
- Note how the Parent consumer wraps the child.
- What's nice is that the two context work independently of one another. :)
- But this is where REACT HOOKS come into play and save us from having to use all this consumer stuff.
For Lessons 9 - 12 go to the Hooks Repo to continue following along.
If we're using the functional component we can't use the static contextType method of consuming the context. (We could use a .Consumer, but this is much cleaner)
So we're going to switch the class component to a functional component and use the useContext() hook.
- Import useContext
- Rewrite the component as a functional component
- Use the useContext() hook to consume the context inside the functional component
- Pass useContext() the context we want to use and that will give us access to everything we are passing through the .Provider()
- Then we'll destructure what we want from the context
What's nice about the useContext() hook is that we can use it as many times as we want in a functional component.
- Again, import useContext()
- Turn the class component into a functional component
- Destructure what you want from .useContext(context)
- we add props because we're going to need to do a props.children
- useState() returns data and a function to update that data, so we'll destructure them from our useState
- then we return the Provider where we pass the data and nest props.children.
- now we can add and wrap it in a component
- consumer the context in a child component with a useContext() hook