how to use Context for class Component in other module in React js

Question

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 <-- in other module but i cant do it, and in browser console i see this error: ==>> ((

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

))

do we have any way to use class component in other module?

these are my codes

parent commponent:

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(
      <MyContext.Provider value={{name:'ali',family:'mohammady',done:'false'}} >
        <div className='container-main'>
          <Roots />
        </div>
      </MyContext.Provider>
    )
  }
}

ReactDOM.render(<Show />, document.getElementById('root'));

and this child module:

import React,{Component} from 'react';
import {MyContext} from './index'

class Roots extends Component{
  static  contextType = MyContext;
  render(){
    return(
      <>
        <p>{console.log(this.context)}</p>
      </>
    )
  }
}

export default Roots;

I wonder how to work this codes if i put child component in parent component !!??

topched · Accepted Answer · 2020-03-03 20:12:26Z

3

You need to export then import the consumer from the context to use it like that

export let MyContext=createContext();
export const MyContextConsumer = MyContext.Consumer

Then import that consumer and use it

import React,{ Component } from 'react';
import { MyContextConsumer } from './index'

class Roots extends Component{
  render(){
    return(
      <MyContextConsumer>
        {value => <p>{console.log(value)}</p>}
      </MyContextConsumer>
    )
  }
}

answered Mar 3, 2020 at 20:12

topched

7753 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mohammad barzegar · Accepted Answer · 2020-03-04 14:41:57Z

1

@topched

thanks for your help your answer is very helpful for me but the console show the error again and then I did a few changes on your code and it runs without error.

when I use bottom script in index.js , i get error but i created a new file with the name context.js and put bottom script in it , the codes run without error

export let MyContext=createContext();
export const MyContextConsumer = MyContext.Consumer

answered Mar 4, 2020 at 14:41

mohammad barzegar

3876 silver badges12 bronze badges

1 Comment

topched Over a year ago

I dont quite follow what you are saying but it sounds like its working so thats great

Collectives™ on Stack Overflow

how to use Context for class Component in other module in React js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related