how to create a context in function based component?-CodePudding

here is the context that i'm trying to create


import React,{Component, useState } from "react";

export const DojoContext = React.createContext() 
 const ThemeContextProvider = (props)=> {
    
    const [theme, setTheme] = useState({
      isLightTheme: true,
      light: { syntax: "#555", ui: "#ddd", bg: "#eee" },
      dark: { syntax: "#ddd", ui: "#333", bg: "#555" },
    });
  
    return (
      <div>
        <DojoContext.Provider value={{ ...theme }}>
            {props.children}
        </DojoContext.Provider>
      </div>
    );
  }

  export default   ThemeContextProvider;

and here's the App component that wraps all other components as a childs

import React from "react";
import Dojo from "./pages/dojo";
import ThemeContextProvider from "./pages/tryContext";

function App() {
  return(
    <div className="App">
      <ThemeContextProvider>
        <Dojo/>
      </ThemeContextProvider>
    </div>
  );
  
  }

export default App;

import React,{Component, useContext} from "react";
import DojoContext from "./tryContext";
const Dojo = () => {

    const context = useContext(DojoContext)
    return (
        <div>
            <button onClick={()=>console.log(context)}> log context </button>
        </div>
    );
}
 
export default Dojo;

So i want to print at the console the value of the context when the button is clicked to make sure that i can access to it's value

CodePudding user response：

You're exporting your context as a named variable. And when importing it in the Dojo component you actually import the ThemeContextProvider

import DojoContext from "./tryContext";

Try

import { DojoContext } from "./tryContext";