title: This in React component
body: <p>Ok, i have some troubles understanding the concept. Help me out!</p>
  
  <p><strong>Parent component:Menu</strong></p>
  
  <pre><code>export class Menu extends React.Component&lt;any,any&gt;{
  ...whole bunch of stuff
   .
   .
   .some nested components in render
      render(){     
         return &lt;MuiThemeProvider muiTheme={muiTheme}&gt;  
          &lt;ReactGridLayout {...some_props}&gt;
              &lt;div key={'canvas'}&gt;               
  
  
   &lt;Canvas {...this.canvas}/&gt;
  
  
               &lt;/div&gt;
          &lt;/ReactGridLayout&gt;   
          &lt;/MuiThemeProvider&gt;   
     }   
  </code></pre>
  
  <p><strong>Child component:Canvas</strong></p>
  
  <pre><code>export class Canvas extends React.Component&lt;CanvasProps,CanvasState&gt;{
  ...whole bunch of stuff
       .
       .
  render(){        
          //return this.props.decorate(this.createCanvas());
          return &lt;canvas
                  width={this.width}
                  height={this.height}  
                  onClick={this.lock(this.setSelected)} 
                  onWheel={this.lock(this.zoom)}   
                  onMouseMove={this.lock(this.rotate)}
                  &gt;{this.props.title}
                  &lt;/canvas&gt;  
        }; 
  </code></pre>
  
  <p><strong>What i'm doing:</strong></p>
  
  <p>1.Send array to <em>parent</em>(<strong>Menu</strong>) props, array include some parameters for menu component and props for <em>child</em>(<strong>Canvas</strong>).</p>
  
  <pre><code>let menu_props=[
              props,
              width,
              height
          ];  
  
          ReactDOM.render( 
              &lt;Menu&gt;            
                  {...menu_props}
              &lt;/Menu&gt;,  
              document.getElementById('canvas')
          ); 
  </code></pre>
  
  <p>2.Attach <strong>Canvas</strong> props from this array to this in <strong>Menu</strong></p>
  
  <pre><code>this.canvas=this.props.children[0];   
  this.width=this.props.children[1]; 
  this.height=this.props.children[2];
  </code></pre>
  
  <p>3.Call <code>setState</code> from <em>parent</em>(<strong>Menu</strong>)</p>
  
  <p><strong>Result</strong></p>
  
  <blockquote>
    <p>TypeError: this.context.clearRect is not a function
        at Canvas.componentDidUpdate (canvas.js:63996)</p>
  </blockquote>
  
  <p><strong>Question</strong>: I understand that for some reason my canvas component start to referring to this of parent component, i cant understand why is this happening. How i can encapsulate scope of each individual component so he could refer to his own this. Thank you!  </p>