Create a Controlled Input (strange behavior)

Tell us what’s happening:
The view works as accepted, i fail to pass the last criteria.
*i can’t understand how it happens but: when i insert “a,b,c” to the “< input>” (from the view)
The handleChange() console.log shows me only [a,ab] it falling behind on 1 change each time.
*No red error in the console.log whatsoever

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({input: event.target.value})
console.log(this.state.input);
}

  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
<input type="text" onChange={this.handleChange} value={this.state.value} />
        { /* 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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

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

setState is asynchronous, so the state doesn’t get updated immediately after you call it. If you want to see the new state after setState gets called, pass a callback function as the second parameter.

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

As for why your code isn’t passing, I can’t say. It’s correct so far as I can tell.

1 Like

Thanks for the asynchronous explanation it really makes it clear now.:slightly_smiling_face:

Nope, removed and it still didn’t pass, did it pass for you?

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})
console.log(this.state.input);
}

  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
<input onChange={this.handleChange} value={this.state.value} />
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

I apologize for not seeing this earlier. It has nothing to do with the type=“text”. It is because you are reference this.state.value for the value attribute. There is no property in the state named “value”.

2 Likes

OMG …these little mistakes :man_facepalming:
Thank you very much