setState does not work with function

JavaScript
1

Tell us what’s happening:
The console says “Error, open your browser console to learn more.” when I start typing and the screen blanks out. This issue gets fixed when I change the setState to:

this.setState({
      input: event.target.value
    });

My question is: why is this happening? I thought its a good practise to use function inside setState to avoid batch state updates but here it seems like it is causing the code to fail. Any help would be appreciated! Thanks
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(event) {
  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}></input>
      { /* 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_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.113 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:

2

Your code seems to be working fine on codesandbox.io.

Here is link where I tried your code: ControlledComponent