Create a Controlled Input, what is wrong with my code

JavaScript
1

Tell us what’s happening:
Hello
Here is my issue
one point of the test is:

//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.

My solution is below
And it working as it need
when I’m typing in the input element it updete the state
But test didn’t accept my solution
What is wrong with it?
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
      })
    }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input onChange={this.handleChange}/>
        { /* 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/68.0.3440.106 Safari/537.36.

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

2

You are not passing test #3:
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.

How would you update the value on the input element?

 <input value=?? onChange={this.handleChange}/>
2 Likes