"Create a Controlled Input" what is wrong with my code?

JavaScript
1

Tell us what’s happening:
Hello,
I’m trying to solve “Create a Controlled Input” exercise
On my opinion I have done it correctly
but when I run test
in the test box I have got such error

// running tests
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.
// tests completed

But when I’m typing in the input element
my value updating and p element rendering input
What 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 value={this.state.value} onChange={e=>{ this.handleChange(e)}} />
        { /* 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/71.0.3578.98 Safari/537.36.

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

2

Skip the arrow function in your onChange event.
onChange={this.handleChange} eventhandlers pass in Event by default, so you dont have to invoke it and pass in the value.

If you by any means need to pass in parameters you can use an anonymous function.
{ () => this.function(args) }

You can also set your handleChange to an arrow function, I dont know whats best practise here, since it can be harder to do proper testing, but then you dont have to write that bind.(this) line.

handleChange = (e) => {
this.setState({
    input:  e.target.value
  });
}
1 Like
3

Thank you for advise
I tried it on VS Code
This stuff working perfectly and it is super

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