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!
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
import React from "react"
import Header from "./Header"
import Button from "./Button"
function App() {
return (
<div>
<Header />
<Button />
</div>
)
}
export default Appimport 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}
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")
)
Last updated
Was this helpful?