Use React's Context API with Hooks

React's Context API provides a way to pass data to components without having to pass props manually at every single level (also known as prop-drilling). You use Context when certain data needs to be accessible to several components at different nesting levels.

Remember, the Context API has three necessary parts: the createContext() method, a Provider component, and one or more Consumer...