• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

221
Views
ThemeToggle.js:10 Uncaught TypeError: Cannot destructure property 'toggleTheme' of 'this.context' as it is undefined

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.

about 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error