Why do we need to use bind() in ReactJS to access this.props or this.state? : <p>look at this code for example</p>

<pre><code>   import React, { Component } from ‘react’;
    class App extends Component {
      constructor(props) {
        super(props);
        this.clickFunction = this.clickFunction.bind(this);
      }
      clickFunction() {
        console.log(this.props.value);
      }
      render() {
        return(
          &lt;div onClick={this.clickFunction}&gt;Click Me!&lt;/div&gt;
        );
      }
    }
</code></pre>

<p>what's the purpose of bind(this) ? it binds the function clickFunction to the context of the object which clickFunction is already bound to , let me illustrate what i am trying to say with a normal javascript code : </p>

<pre><code>class my_class {
  constructor() {
    this.run = this.run.bind(this)
  }
  run() {
    console.log(this.data)
  }
}
my_class.data = 'this is data'
new my_class().run() //outputs 'undefined'
</code></pre>

<p>and if you remove bind(this) it will give you the same results </p>

<pre><code>  constructor() {
    this.run = this.run
  }
</code></pre>

<p>results : </p>

<pre><code>new my_class().run() //still outputs 'undefined'
</code></pre>

<p>i am sure i am understanding something wrong and this might the worst question on earth however i am new to es6 and i am not used to classes yet so i apologize for that</p>
