This section may need to be reworked

JavaScript
1

Tell us what’s happening:

I may be missing something but it seems as if this exercise is very misleading and needs to be reworked. In the explanation it never explains that in order to make this work the binding of handleChange needs to be in the onChange event handler and not in the constructor. Not only that the answer portion explicitly asks us to do it wrong by asking for the binding in the constructor. It is explained in the hint section but I spent a good chunk of time wondering why my code wasn’t working when the explanation doesn’t fully cover the concept and the answer asks explicitly for an incorrect answer.

Your code so far


class ControlledInput extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: ''
  };
  // change code below this line
  
  // 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:

2

Can you provide a link to something that says “event handlers should be bounds in the event itself, and not in the constructor”? As far as I’ve ever done (until i started coding differently with ES6), i always bound event handlers to the component’s scope in the constructor.

3

Okay I went back and looked at the hint and figured out what it was I was missing. I was including the () after handleChange in the onChange method. Once I took that off it worked with the binding in the constructor.

1 Like