title: Binding vs Arrow-function (in JavaScript, or for react onClick)
body: <p>So I am trying to learn <code>JavaScript</code> and/or <code>react</code> and got a little mixed up with understanding <code>.bind(this)</code> in the constructor. However, I think to understand it now, and just want to know,<br>
  Why would anyone use Binding vs an Arrow-function in <code>JavaScript</code>?<br>
  (or in the <code>onClick</code> event).</p>
  <h3 id="is-there-any-procon-to-use-one-vs-the-other-ergg">Is there any pro/con to use one vs the other?</h3>
  <p>See below code samples.</p>
  <p><strong>Binding method ensures <code>this</code> in <code>clickEvent</code> function references the class:</strong></p>
  <pre><code>class Click extends react.Component {
    constructor(props) {
      super(props)
      this.clickEvent = this.clickEvent.bind(this);
    }
  
    render = () =&gt; (
      &lt;button onClick= { this.clickEvent } &gt; Click Me &lt; /button&gt;
    )
  
    clickEvent() { console.log(this) } // 'this' refers to the class
  }
  </code></pre>
  <p><strong>However below method also references the class:</strong></p>
  <pre><code>class Click extends react.Component {
  
    render = () =&gt; (
      &lt;button onClick= {() =&gt; { this.clickEvent() }}&gt; Click Me &lt; /button&gt;
    )
  
    clickEvent() { console.log(this) } // 'this' refers to the class
  }
  </code></pre>