React - Bind 'this' to a Class Method

[sugarpearl]

Tell us what’s happening:
What is the reason that ‘this’ was undefined before we bind ‘this’ to handleClick?

My code so far
I have successfully completed the challenge, I just have some questions. So I don’t really need help completing the challenge, just need some clarification.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "Hello"
    };
    // Change code below this line
    this.handleClick = this.handleClick.bind(this);
    // Change code above this line
  }
  handleClick() {
    this.setState({
      text: "You clicked!"
    });
  }
  render() {
    return (
      <div>
        { /* Change code below this line */ }
        <button onClick={this.handleClick}>Click Me</button>
        { /* Change code above this line */ }
        <h1>{this.state.text}</h1>
      </div>
    );
  }
};

I did some research and stumble into this, from W3school:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    console.log(super(brand))        //Model {carname: "Ford"}
    //super(brand);
    this.model = mod;
  }
  show() {
    console.log(this)     //Model {carname: "Ford", model: "Mustang"}
    return this.present() + ', it is a ' + this.model;
  }
}

mycar = new Model("Ford", "Mustang");
console.log(mycar.show())     //I have a Ford, it is a Mustang

So apparently when you extend, the ‘this’ value is supposed to be preserved. There is no binding needed here, to use this.carname in show()

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0

Challenge: React - Bind ‘this’ to a Class Method

Link to the challenge:

freeCodeCamp.org

[camperextraordinaire]

There is a good explanation on StackOverflow.

Let me modify your code a little, for you to see when you would need to bind this.

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    console.log(super(brand))        //Model {carname: "Ford"}
    //super(brand);
    this.model = mod;
  }
  show() {
    console.log(this)     //Model {carname: "Ford", model: "Mustang"}
    return this.present() + ', it is a ' + this.model;
  }
}

mycar = new Model("Ford", "Mustang");
const carShow = mycar.show; // the show method of Model is bound to the window, so this errors out.

console.log(carShow())  

However, if I bind this to the show method:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    console.log(super(brand))        //Model {carname: "Ford"}
    //super(brand);
    this.model = mod;
    this.show = this.show.bind(this);
  }
  show() {
    console.log(this)     //Model {carname: "Ford", model: "Mustang"}
    return this.present() + ', it is a ' + this.model;
  }
}

mycar = new Model("Ford", "Mustang");
const carShow = mycar.show;
console.log(carShow())  //  I have a Ford, it is a Mustang

[sugarpearl]

Thank you so much!!! You made my life so much easier!