title: Debugger inside React Context API Consumer block - this is undefined
body: <p>I am trying to debug a component using <a href="https://reactjs.org/docs/context.html#consumer" rel="nofollow noreferrer">Context API Consumer</a> inside <code>render</code> method on browser dev tools. If i place break-point inside <code>Consumer</code> block, i can't print props etc. on console dynamically as <code>this</code> is <code>undefined</code>. Normally running this works fine, but while debugging only value of <code>this</code> is <code>undefined</code>. Following is sample render method of component.</p>
  
  <pre><code>  componentMethod = () =&gt; {
        console.log(this.props.name); //Placing breakpoint here, value is this is defined
    }
  
    render() {
          return (
              &lt;div className={styles.container}&gt;
                  &lt;div&gt;
                      &lt;h4&gt;{this.props.name}&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div className={styles.block}&gt;
                      &lt;MyComponent.Consumer&gt;
                          {
                              ({ firstParam, secondParam }) =&gt;
                                  &lt;AotherComponent
                                      firstParam={firstParam}
                                      secondParam={secondParam}
                                      thirdParam={this.props.name}
                                  /&gt;
                          }
                      &lt;/MyComponent.Consumer&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
    }
  </code></pre>
  
  <p>I could be related fat arrow use here, but I am able to get value of this while using break-point in <code>componentMethod</code>. Is there a way to <code>bind</code> <code>this</code> for <code>Consumer</code> block?</p>