React.js Passing Functions to Components: Bind vs no-Binds

Question

class App extends React.Component {
  constructor() {
    super();
    this.name = "Bob";
    this.handleClickTwo = this.handleClickOne.bind(this);
  }
  
  handleClickOne() {
    alert(this.name);
  }
  
  handleClickThree = () => alert(this.name);
  
  render() {
    return (
      <div>
        <button onClick={ this.handleClickOne }> Click One </button>
        <button onClick={ this.handleClickTwo }> Click Two </button>
        <button onClick={ this.handleClickThree }> Click Three </button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

I'm trying to understand React.js more, and I wanted to test out some things. Clicking buttons with the label "Click Two" and "Click Three" work as intended meaning it shows an alert for the name "Bob".

But when I click the button labelled "Click One", it gives me an error saying that 'name' is an undefined property.

Am I misunderstanding React.js or JS in general? Does the 'this' in handleClickOne() refer to the function itself and not what's in the constructor? And if so, why does handeClickTwo work?

Does this answer your question? [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Robin Zigmond, Nov 19 '21 at 22:08

Joshua Craven · Accepted Answer · 2021-11-20T06:18:42.747

functions are not bound by default in javascript. You didn't bind handleClickOne, so you can't call this.handleClickOne

handleClickTwo is bound in your code in the constructor, using this.handleClickTwo = this.handleClickOne.bind(this).

handleClickThree uses public class fields syntax to correctly bind the callback, so it works as well.

To bind handleClickOne, you must use this.handleClickOne = this.handleClickOne.bind(this) to bind it in the constructor.

class App extends React.Component {
  constructor() {
    super();
    this.name = "Bob";
    this.handleClickOne = this.handleClickOne.bind(this);
    this.handleClickTwo = this.handleClickOne.bind(this);
  }
  
  handleClickOne() {
    alert(this.name);
  }
  
  handleClickThree = () => alert(this.name);
  
  render() {
    return (
      <div>
        <button onClick={ this.handleClickOne }> Click One </button>
        <button onClick={ this.handleClickTwo }> Click Two </button>
        <button onClick={ this.handleClickThree }> Click Three </button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

React.js Passing Functions to Components: Bind vs no-Binds

1 Answers1