title: bind(this) in ReactJS and onChange update to state
body: <p>I have the following code:</p>
  
  <p>index.js</p>
  
  <pre><code>class App extends React.Component {
      constructor() {
          super();
          this.state = {
              homeLink: "Home"
          };
      }
  
      onGreet() {
          alert("Hello!");
      }
  
      onChangeLinkName(newName) {
          this.setState({
              homeLink: newName
          });
      }
  
      render() {
          return (
              &lt;div className="container"&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-xs-10 col-xs-offset-1"&gt;
                          &lt;Header homeLink={this.state.homeLink}/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-xs-10 col-xs-offset-1"&gt;
                          &lt;Home
                              name={"Max"}
                              initialAge={27}
                              greet={this.onGreet}
                              changeLink={this.onChangeLinkName.bind(this)}
                              initialLinkName={this.state.homeLink}
                          /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>And
  Home.js</p>
  
  <pre><code>export class Home extends React.Component {
      constructor(props) {
          super();
          this.state = {
              age: props.initialAge,
              status: 0,
              homeLink: props.initialLinkName
          };
      }
  
      onMakeOlder() {
          this.setState({
              age: this.state.age + 3
          });
      }
  
      onChangeLink() {
          this.props.changeLink(this.state.homeLink);
      }
  
      onHandleChange(event) {
          this.setState({
              homeLink: event.target.value
          });
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;p&gt;In a new Component!&lt;/p&gt;
                  &lt;p&gt;Your name is {this.props.name}, your age is {this.state.age}&lt;/p&gt;
                  &lt;p&gt;Status:  {this.state.status}&lt;/p&gt;
                  &lt;hr/&gt;
                  &lt;button onClick={() =&gt; this.onMakeOlder()} className="btn btn-primary"&gt;Make me older!&lt;/button&gt;
                  &lt;hr/&gt;
                  &lt;button onClick={this.props.greet} className="btn btn-primary"&gt;Greet&lt;/button&gt;
                  &lt;hr/&gt;
                  &lt;input type="text" value ={this.state.homeLink}
                         onChange={(event) =&gt; this.onHandleChange(event)}/&gt;
                  &lt;button onClick={this.onChangeLink.bind(this)} className="btn btn-primary"&gt;Change Header Link&lt;/button&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Would <code>onChange</code> in the <code>input</code> tag be triggered as soon as I write something in the <code>input</code> field and update to <code>state</code>? I can't see the <code>state</code> change in the <code>React Developer Tool</code> extension in Chrome when I write something in the <code>input</code> field. </p>
  
  <p>When I click the button <code>this.onChangeLink</code> it triggers the <code>onChangeLink</code> function. The <code>onChangeLink</code> doesn't seem to take any arguments since the brakets are empty, still I'm able to pass <code>this.state.homeLink</code> to <code>this.props.changeLink</code> inside the <code>onChangeLink</code> function. <code>this.props.changeLink</code> which is also a function in <code>index.js</code> takes an argument <code>newName</code>. I guess this is where the <code>bind(this)</code> comes in. What does <code>bind(this)</code> do? Could I rewrite it with a fat arrow function like <code>(event) =&gt; this.onChangeLink(event)</code>?</p>