Name: Context.Consumer
Uploaded: 2019-10-19T19:28:14.901Z
Duration: 12 min 12 s
Description: So far, we've only been able to use `Context` with class-based components. To use it with functional components, we wrap elements in an instance of ` ` and within that, provide a function which returns the elements: ```js {(theme) => Switch Theme } ```

scrimba

Watch in fullscreen

Context.Consumer

by Bob Ziroll

About

Comments

Notes

Context.Consumer

by Bob Ziroll

Expand for more info

Button.js

run

preview

console

import React, {Component} from "react"
import ThemeContext from "./themeContext"

class Button extends Component {
    render() {
        const theme = this.context
        return (
            <button className={`${theme}-theme`}>Switch Theme</button>
        )    
    }
}

Button.contextType = ThemeContext

export default Button

-12:12