Context Provider & Consumer in Class-based Component
Context Provider & Consumer Practice
Context Provider & Consumer Practice example:
import React from "react"
// Creating context
const UserContext = React.createContext()
export default UserContextimport React, {Component} from "react"
import UserContext from "./userContext"
class Header extends Component {
    render() {
        // Consuming context
        const user = this.context
        return (
            <header>
                <p>Welcome, {user}!</p>
            </header>
        )    
    }
}
// Defining contextType
Header.contextType = UserContext
export default Header
import React from "react"
import Header from "./Header"
import UserContext from "./userContext"
class App extends React.Component{
    // Defining contextType
    static contextType = UserContext
    
    render(){
        // Consuming context
        const user = this.context
        return (
            <div>
                <Header />
                <main>
                    <p className="main">No new notifications, {user}! 🎉</p>
                </main>
            </div>
        )
    }
    
}
export default App/**
 * Challenge: Set up context to save the user's username and pass it to anywhere that is currently hardcoding "Username".
 * 
 * Use the static class property `contextType` on any components that need to consume context.
 */
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import UserContext from "./userContext"
ReactDOM.render(
    // Passing props to Context Provider
    <UserContext.Provider value={"John"}>
        <App />
    </UserContext.Provider>, 
    document.getElementById("root")
)
Last updated
Was this helpful?