Code doesn't run, but I pass the challenge. React: Create a Controlled Input

JavaScript
1

Tell us what’s happening:
When I run the code below, I get “script error” and nothing renders but I pass the challenge.

if I delete “event” and instead use

“handleChange()” rather than “handleChange(event)”

The code works, but I do not pass the challenge. Anyone know why this might be? Cheers

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

Challenge: Create a Controlled Input

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/react/create-a-controlled-input

2

Changing this:

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

to this:

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

worked for me.

I don’t think you need the arrow function since you’re not updating state based on the current state.

3

The reason this fails is that using an updater (i.e. state => ({ input: event.target.value })) means that event.target.value is not used immediately. It then isn’t available after the event handler returns because of React’s event pooling. To see this, you can put event.persist() inside the handler and it should work.

However, @stressstressstress’s solution is the way to go, since you don’t need to read state when updating it.

2 Likes