Code Working Properly but getting error while running test

JavaScript
1

Tell us what’s happening:

I am getting a weird error while runnig test, don’t know what the actual cause.
// running tests
Typing in the input element should update the state and the value of the input, and the p
element should render this state as you type.
// tests completed

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 () {
this.setState(state => ({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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:

2

OK , I see a couple of small problems here.

<input
  value={this.state.input}
  onChange={this.handleChange.bind(this)}
 />

I’ve spread this onto multiple lines here for readability. You don’t bind this here. We’ll do that elsewhere. We just need to pass the name of the method here.

Next:

handleChange () {
  this.setState(state => ({input: event.target.value}));
}

This is basically correct, but event is undefined. It is being passed automatically by the input component, we just need to accept it in the parameter list here.

Lastly,

constructor(props) {
  super(props);
  this.state = {
    input: ''
  };
  // Change code below this line

  // Change code above this line
}

This is where you are supposed to bind this, with the format of:

  this.myMethod = this.myMethod.bind(this);

When I make those three changes, the test passes for me.

Your code seems to work. I don’t understand how event gets defined in the method. Maybe it has something to do with how you bound this. In any case, the way they want you to do it is the normal way. (Actually there are even easier ways to do it, but it is normal to start teaching it this way - baby steps.)