I am getting some kind of error. I've been trying to fix it but I still can't figure it out.
import React, { Component, createContext } from "react";
export const ThemeContext=createContext();
class ThemeContextProvider extends Component{
state={
isLightTheme: true,
light:{ syntax:"#555",ui:"#ddd", bg:"#eee"},
dark:{syntax:"ddd",ui:"#333", bg:"#555"}
}
toggleTheme=()=>{this.setState({isLightTheme:!this.state.isLightTheme})}
render(){ return(
<ThemeContext.Provider value={{...this.state, toggleTheme:this.toggleTheme}}>
{this.props.children}
</ThemeContext.Provider>
)
}
}
export default ThemeContextProvider;
and
import React, { Component } from "react";
import { ThemeContext } from "./context";
class ThemeToggle extends Component{
static contextType=ThemeContext;
render(
) {
const{toggleTheme}=this.context;
return(
<button onClick={toggleTheme}>Toggle the Theme</button>
)
}
}
export default ThemeToggle;
ERROR: ThemeToggle.js:10 Uncaught TypeError: Cannot destructure property 'toggleTheme' of 'this.context' as it is undefined.