>
        </Panel>
      );
    }
    
    function Panel({ title, children }) {
      const theme = useContext(ThemeContext);
      const className = 'panel-' + theme;
      return (
        <section className={className}>
          <h1>{title}</h1>
          {children}
        </section>
      )
    }
    
    function Button({ children }) {
      const theme = useContext(ThemeContext);
      const className = 'button-' + theme;
      return (
        <button className={className}>
          {children}
        </button>
      );
    }
    
    

Show more

Note that ` value="dark" ` passes the ` "dark" ` string, but ` value={theme} `
passes the value of the JavaScript ` theme ` variable with [ JSX curly braces.
](/learn/javascript-in-jsx-with-curly-braces) Curly braces also let you pass
context values that aren’t strings.

Next  Example

* * *

###  Specifying a fallback default value

If React can’t find any providers of that particular  context  in the parent
tree, the context value returned by ` useContext() ` will be equal to the
default value  that you specified when you [ created that context
](/reference/react/createContext) :

    
    
    const ThemeContext = createContext(null);

The default value **never changes** . If you want to update context, use it
with state as  described above.

Often, instead of ` null ` , there is some more meaningful value you can use
as a default, for example:

    
    
    const ThemeContext = createContext('light');

This way, if you accidentally render some component without a corresponding
provider, it won’t break. This also helps your components work well in a test
environment without setting up a lot of providers in the tests.

In the example below, the “Toggle theme” button is always light because it’s
**outside any theme context provider** and the default context theme value is
` 'light' ` . Try editing the default theme to be ` 'dark' ` .

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { createContext, useContext, useState } from 'react';
    
    const ThemeContext = createContext('light');
    
    export default function MyApp() {
      const [theme, setTheme] = useState('light');
      return (
        <>
          <ThemeContext.Provider value={theme}>
            <Form />
          </ThemeContext.Provider>
          <Button onClick={() => {
            setTheme(theme === 'dark' ? 'light' : 'dark');
          }}>
            Toggle theme
          </Button>
        </>
      )
    }
    
    function Form({ children }) {
      return (
        <Panel title="Welcome">
          <Button>Sign up</Button>
          <Button>Log in</Button>
        </Panel>
      );
    }
    
    function Panel({ title, children }) {
      const theme = useContext(ThemeContext);
      const className = 'panel-' + theme;
      return (
        <section className={className}>
          <h1>{title}</h1>
          {children}
        </section>
      )
    }
    
    function Button({ children, onClick }) {
      const theme = useContext(ThemeContext);
      const className = 'button-' + theme;
      return (
        <button className={className} onClick={onClick}>
          {children}
        </button>
      );
    }
    
    

Show more

* * *

###  Overriding context for a part of the tree

You can override the context for a part of the tree by wrapping that part in a
provider with a different value.

    
    
    <ThemeContext.Provider value="dark">  
    
    
      ...  
    
    
      <ThemeContext.Provider value="light">  
    
    
        <Footer />  
    
    
      </ThemeContext.Provider>  
    
    
      ...  
    
    
    </ThemeContext.Provider>

You can nest and override providers as many times as you need.

####  Examples of overriding context

1  .  Overriding a theme  2  .  Automatically nested headings

####

Example  1  of  2  :

Overriding a theme

Here, th