title: I just used react context, why does static context not work if I console on other components
body: <p>I have two components, the first component is the 'select language' component for example he is a Provider and the second component is for example the 'login' component as the consumer I want to take the value that has been shared from the provider how to take that value? the thing is when I console the valuation at the login component is undifined</p>
  
  <p>this is my provider 
  in this component there are no problems</p>
  
  <pre><code>import MyContext from './MyContext'
  export class SelectLanguage extends Component {
  constructor(props){
      super(props)
      this.state = {
        loading:true,
        pages:''
      };
      this.handleChange = this.handleChange.bind(this)
    }
  }
  componentDidMount(){
   const getCodeFromLocal = this.props.resGet('lang-code')||'RUWT-EN';
        Api.post('pages-content', {CODE:getCodeFromLocal})
        .then((response) =&gt; {
          if(response.data.STATUS_CODE === '200'){
            this.setState({
              loading:false,
              pages:response.data.DATA
            });
          }
        })
      }
  }
  render() {
      const {language,loading,code,pages} = this.state
      if(loading){
        return(
          &lt;p&gt;loading...&lt;/p&gt;
        )
      }else{
        return (
          &lt;MyContext.Provider value={pages}&gt;
            &lt;Form.Group controlId="selectLanguage"&gt;
              &lt;Form.Label&gt;&lt;b&gt;{pages.app_setting.language}&lt;/b&gt;&lt;/Form.Label&gt;
              &lt;Form.Control as="select" ref="selectLanguage" onChange={this.handleChange} value={code}&gt;
                {language.map(data =&gt; {
                  return(
                    &lt;React.Fragment key={data.language_id}&gt;
                      &lt;option value={data.code}&gt;{data.language_name}&lt;/option&gt;
                    &lt;/React.Fragment&gt;
                  )
                })}
              &lt;/Form.Control&gt;
            &lt;/Form.Group&gt;
          &lt;/MyContext.Provider&gt;
        )
      }
    }
  </code></pre>
  
  <p>this is my consumer/static context</p>
  
  <pre><code>export class Login extends Component {
  constructor(props){
      super(props)
      this.state = {
        about:[]
      };
    }
  }
  
  static contextType = MyContext;
  
  render() {
  let value = this.context
  console.log(value)
  return(&lt;p&gt;tes&lt;/p&gt;)
  }
  
  </code></pre>
  
  <p>why value undefined? 
  even though when I console at the data provider it appears</p>