title: Binding this to nested functions in React
body: <p><strong>How can I bind <code>this</code> to the React component when dealing with a nested function?</strong></p>
  
  <p>Here is a skeleton example. The reason that <code>function2</code> is nested is so that you can get access to the variables defined in <code>function1</code></p>
  
  <pre><code>class View extends Component{
  
      constructor(props){
          this.function1 = this.function1.bind(this);
  
          this.state = {
              a = null;
          }
      }
  
      componentDidMount(){
          function1();
      }
  
      function1(){
          console.log(this); //will show the component correctly
  
          var param1 = 10;
  
          //call a second function that's defined inside the first function
          function2();
  
          function function2(){
              console.log(this); //undefined
  
              var a = param1*2;
  
              this.setState({ a : a}); //won't work because this is undefined
          }
      }
  
      render(){
          return(
              &lt;div&gt;
                  &lt;p&gt; Hello &lt;/p&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>