title: In React component lifecycle methods, `this.context` is an empty Object
body: <p>Why is <code>this.context</code> an empty object, in this React component lifecycle methods?</p>
  
  <p>The context has the correct value in the <code>Consumer</code> for that context. Only the <code>this.context</code> API is failing.</p>
  
  <pre class="lang-jsx prettyprint-override"><code>const LoremContext = React.createContext({
      lorem: "ipsum",
  })
  
  
  class MenuItem extends React.Component {
  
      componentDidMount() {
          console.log(
              "In MenuItem.componentDidMount, this.context is:",
              this.context)
      }
  
      render() {
          console.log(
              "In MenuItem.render, this.context is:",
              this.context)
          return ( &lt;LoremContext.Consumer&gt;{
              (lorem) =&gt; {
                  console.log("In LoremContext.Consumer, lorem is:", lorem)
                  return (
                      &lt;li&gt;
                          { `Eat ${this.props.dish} at ${lorem}` }
                      &lt;/li&gt;
                  )
              }
          }&lt;/LoremContext.Consumer&gt; )
      }
  }
  
  MenuItem.contextType = LoremContext
  
  class Menu extends React.Component {
      render() {
          …
      }
  }
  
  class Application extends React.Component {
      render() {
          return (
              &lt;LoremContext.Provider value={ this.props.world.lorem }&gt;
                  &lt;section className="app"&gt;
                      &lt;Menu menuItems={ [ … ] } /&gt;
                  &lt;p&gt;Fusce varius id arcu egestas sodales&lt;/p&gt;
              &lt;/section&gt;
          &lt;/LoremContext.Provider&gt;
      )
  }
  
  ReactDOM.render(
      &lt;Application world={ { lorem: "consecteur" } } /&gt;,
      document.getElementById('app-container'),
  )
  </code></pre>
  
  <p>This is using React 16.4, so it makes use of the <a href="https://reactjs.org/docs/context.html" rel="noreferrer">documented context API</a> (introduced in React 16.3).</p>
  
  <p>According to that documented API, the above code should get access to the context (defined in the return value from <a href="https://reactjs.org/docs/context.html#reactcreatecontext" rel="noreferrer"><code>React.createContext</code></a>) in two ways:</p>
  
  <ul>
  <li><p>The <code>LoremContext.Consumer</code> component receives the context value passed by the <code>LoremContext.Provider</code>.</p>
  
  <p>The consumer then provides that context value as an argument to the function within that component. In this case, <code>lorem</code> is the argument that receives the context value.</p></li>
  <li><p>The <code>this.context</code> property receives (because of the <a href="https://reactjs.org/docs/context.html#classcontexttype" rel="noreferrer">declared <code>MenuItem.contextType</code> class property</a>) the context value, inside the “lifecycle methods”.</p></li>
  </ul>
  
  <p>Only one of those is working for me.</p>
  
  <ul>
  <li>The <code>LoremContext.Consumer</code> API is getting and passing the context value correctly. The <code>console.log</code> output is:</li>
  </ul>
  
    <pre class="lang-none prettyprint-override"><code>  In LoremContext.Consumer, lorem is: consecteur
  </code></pre>
  
  <ul>
  <li>The <code>this.context</code> is not getting the correct value, instead it gets an empty Object. The <code>console.log</code> output is:</li>
  </ul>
  
    <pre class="lang-none prettyprint-override"><code>  In MenuItem.render, context is: Object {  }
    In MenuItem.componentDidMount, context is: Object {  }
  </code></pre>
  
  <p>So the consumer is receiving the correct value, but <code>this.context</code> is not. Why the difference? How can I get the correct value received at <code>this.context</code>?</p>