setState working

Curriculum Help
1

why this works

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

and this doesn’t

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


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({
  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 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0.

Challenge: Create a Controlled Input

Link to the challenge:

2

This is a bit more advanced topic, but in general when you pass function instead of object, by the time this function will be invoked event will be already expired (this function will not be invoked immediately). In order for this to work you need to create a snapshot of the value (extract it and pass value to function instead):

handleChange(event) {
  const { value } = event.target; // Extract value
  this.setState(() => ({
    input : value,
  }));
}