Why bind method within input element for Controlled Input?

JavaScript
1

Tell us what’s happening:
I was able to pass these tests, but I’m left wondering about the input element. For onChange attribute, why can’t ‘this.handleChange’ work if there is a binding statement for ‘this’ in the constructor? In other exercises, we binded ‘this’ for each method within the constructor and did not need to bind again in the render method.

Your code so far


class ControlledInput extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: ''
  };
  // change code below this line
  this.handleChange.bind(this);
  // change code above this line
}
// change code below this line
handleChange(event) {
  this.setState({
    input: event.target.value
  });
}
// change code above this line
render() {
  return (
    <div>
      { /* change code below this line */}
      <input value = {this.state.input} onChange = {this.handleChange.bind(this)}/>
      { /* change code above this line */}
      <h4>Controlled Input:</h4>
      <p>{this.state.input}</p>
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15.

Challenge: Create a Controlled Input

Link to the challenge:

2

bind returns a function with binded this. You need to save and use this function.