title: how to use Context for class Component in other module in React js
body: <p>when i use context in Reactjs ,by using hooks I just can use 'useContext' for function component in other module , but I want to use it for -->  class component  &lt;-- in other module but i cant do it, and in browser console i see this error: ==>> ((</p>
  
  <pre><code>ReferenceError: Cannot access 'MyContext' before initialization
  Module.MyContext
  http://localhost:3000/static/js/main.chunk.js:12:101
  Module../src/news.js
  F:/0 React Js project/my-appfirst-app/src/news.js:21
  </code></pre>
  
  <p>))</p>
  
  <p>do we have any way to use class component in other module?</p>
  
  <p>these are my codes</p>
  
  <p>parent commponent:</p>
  
  <pre><code>import React,{createContext,Component} from 'react';
  import ReactDOM from 'react-dom';
  import Roots from './news'
  import * as serviceWorker from './serviceWorker';
  
  
  export let MyContext=createContext();
  
  class Show extends Component{
    render(){
      return(
        &lt;MyContext.Provider value={{name:'ali',family:'mohammady',done:'false'}} &gt;
          &lt;div className='container-main'&gt;
            &lt;Roots /&gt;
          &lt;/div&gt;
        &lt;/MyContext.Provider&gt;
      )
    }
  }
  
  ReactDOM.render(&lt;Show /&gt;, document.getElementById('root'));
  
  </code></pre>
  
  <p>and this child module:</p>
  
  <pre><code>import React,{Component} from 'react';
  import {MyContext} from './index'
  
  class Roots extends Component{
    static  contextType = MyContext;
    render(){
      return(
        &lt;&gt;
          &lt;p&gt;{console.log(this.context)}&lt;/p&gt;
        &lt;/&gt;
      )
    }
  }
  
  export default Roots;
  </code></pre>
  
  <p>I wonder how to work this codes if i put child component in parent component !!??</p>