React: Create a Controlled Input - tests incorrect

JavaScript
1

Tell us what’s happening:

My test is failing though the code works.

Your code so far
class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ‘’
};
// Change code below this line
this.handleChange = this.handleChange.bind(this);
// 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 (


{ /* Change code below this line */}
    { /* Change code above this line */}
    <h4>Controlled Input:</h4>
    <p>{this.state.input}</p>
  </div>
);

}
};


class ControlledInput extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: ''
  };
  // Change code below this line
  this.handleChange = this.handleChange.bind(this);
  // 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:

2

You are missing the event parameter on the handleChange method.

Two more things:

You are using an updater function for setState but you are not actually using the current state for anything. In which case you should just use an object.

You are binding the method twice, both in the constructor and in the onChange, use one or the other.