React. The challeng should't pass the test with this code

Tell us what’s happening:

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.

It doesn’t show the text, instead it’s an error.

I was looking at the hint and then found out I didn’t need to write

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

Instead I could just write

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

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 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:

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

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

This code works in the challenge, but it’s wrong.

i would use the callback function of setState only if i had for example to increase the value of a counter : ex i need to add 1 to the previous state of 0 , i need to use the callback function to get the previous value of 0 to add one.
For this case you don’t need to add letters to the input but instead the whole value in your input field becomes the input state regardless of what value was there before

1 Like