Validate Compound Component Context Consumers
If someone uses one of our compound components outside the React.createContext <ToggleContext.Provider />, they will experience a confusing error. We could provide a default value for our context, but in our situation that doesn't make sense. Instead let's build a simple function component which does validation of our contextValue that comes from the <ToggleContext.Consumer />. That way we can provide a more helpful error message.
Instructor: [00:00] One thing we need to consider when using React to create context is what would happen if somebody renders a consumer outside of a provider. We can do that inside of here by swapping out our toggle with a div, and a div here.
[00:14] We're going to get an error, "Cannot read on of undefined." That's happening because here, we're destructuring something that is actually undefined. The context value here is not defined because we're not providing any sort of default value, and we're not providing a value via a provider.
[00:32] We could solve this problem in two ways. First, we can provide a default value here -- provide on is false, and toggle is just an empty arrow function. That would avoid the error, but the component doesn't work at all, so we'll just use some validation.
[00:47] I'm going to make a new component called function toggle consumer. That's going to take some props, and then this is going to return toggle context consumer.
[00:58] As the child function, it's going to get the context, and it's going to return props.childrencontext.
[01:09] So far, we haven't done anything different. Let's just swap out all of these for our new function, and everything works exactly the same as it had before.
[01:18] Now let's do our validation. We'll say, "If there's not context, then that means that we're rendering this outside of a provider."
[01:26] That's not allowed, so we'll throw a new error that says, "Toggle compound components must be rendered within the toggle component." With that, we get a useful and actionable error message. Let's go ahead and fix this to be toggle again, and the button is still working.
[01:48] In review, the problem we're trying to solve here is that the toggle context consumer in our situation doesn't make sense to be rendered outside of the toggle context provider, so we're adding some validation to make sure that the context value does exist.
[02:02] If it doesn't, we'll throw an error. That ensures that people are rendering the toggle context consumer within the toggle context provider.
[02:09] There are some situations where having a default value for a context does make sense, but for compound components, that generally isn't the case. Having some form of validation can help users of your compound components avoid confusing errors.