Questions
Answer the following questions to check what you have learned in this chapter:
- We have a context defined as follows to hold the theme state for an app:
type Theme = {
name: string;
color: 'dark' | 'light';
};
type ThemeContextType = Theme & {
changeTheme: (
name: string,
color: 'dark' | 'light'
) => void;
};
const ThemeContext = createContext<ThemeContextType>();
The code doesn’t compile though; what is the problem?
- The context from question 1 has a provider wrapper called
ThemeProvider
, which is added to the component tree as follows:<ThemeProvider>
<Header />
<Main />
</ThemeProvider>
<Footer />
The theme state is undefined
when destructured from useContext
in the Footer
component. What is the problem?
- Is it possible to have two React contexts...