# Moving Context Provider to its Own Component

## Moving Context Provider to its Own Component

We move the `<Provider>` to its own component. This will eventually allow us to add `state` and a `toggle` theme to it and hook up our button!

{% tabs %}
{% tab title="Header.js" %}

```jsx
import React, {Component} from "react"
import {ThemeContextConsumer} from "./themeContext"

function Header(props) {
    return (
        // Consuming Context
        <ThemeContextConsumer>
            {theme => (
                <header className={`${theme}-theme`}>
                    <h2>{theme === "light" ? "Light" : "Dark"} Theme</h2>
                </header>
            )}
        </ThemeContextConsumer>
    )    
}

export default Header

```

{% endtab %}

{% tab title="Button.js" %}

```jsx
import React from "react"
import PropTypes from "prop-types"
import {ThemeContextConsumer} from "./themeContext"

function Button(props) {
    return (
        // Consuming Context
        <ThemeContextConsumer>
            {theme => (
                <button className={`${theme}-theme`}>Switch Theme</button>
            )}
        </ThemeContextConsumer>
    )    
}

export default Button

```

{% endtab %}

{% tab title="App.js" %}

```jsx
import React from "react"

import Header from "./Header"
import Button from "./Button"

function App() {
    return (
        <div>
            <Header />
            <Button />
        </div>
    )
}

export default App
```

{% endtab %}

{% tab title="themeContext.js" %}

```jsx
import React, {Component} from "react"

// Destructing the Provider & Consumer property from Context
const {Provider, Consumer} = React.createContext()

// Craeting a Context Provider
class ThemeContextProvider extends Component{
    render(){
        return(
            // Wrapping up all child component that will Consume the Context given by Provider
            <Provider value={"dark"}>
                {this.props.children}
            </Provider>
        )
    }
}

// Exporting the Provider & Consumer
export {ThemeContextProvider, Consumer as ThemeContextConsumer}

```

{% endtab %}

{% tab title="index.js" %}

```jsx
import React from "react"
import ReactDOM from "react-dom"

import App from "./App"
import {ThemeContextProvider} from "./themeContext"

ReactDOM.render(
    // Rendering our ThemeContextProvider Class component into DOM tree
    <ThemeContextProvider>
        <App />
    </ThemeContextProvider>, 
    document.getElementById("root")
)

```

{% endtab %}
{% endtabs %}
