Questions

Answer the following questions to check what you have learned in this chapter:

1. 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?

2. 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?

3. Is it possible to have two React contexts...