const themes = {
light: { foreground: '#000000', background: '#eeeeee'
},
dark: { foreground: '#ffffff',
background: '#222222'}};const ThemeContext = React.createContext({
theme: themes.dark,
toggleTheme: () => {},});function ThemeTogglerButton() { // The Theme Toggler Button receives not only the theme // but also a toggleTheme function from the context
return (
{({theme, toggleTheme}) => (
)}
);}function Content() {
return (
);}class App extends React.Component { constructor(props) {
super(props);
this.toggleTheme = () => {
this.setState(state => ({
theme:
state.theme === themes.dark
? themes.light : themes.dark,
}));
}; // State also contains the updater function so it will // be passed down into the context provider
this.state = { theme: themes.light, toggleTheme: this.toggleTheme}; }
render() { // The entire state is passed to the provider
return (); }}ReactDOM.render(, document.querySelector("div"));