My code is correct but still error

JavaScript
1

Tell us what’s happening:
My code is fine.

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

// change code above this line
render() {
  return (
    <div>
      { /* change code below this line */}

      { /* change code above this line */}
      <input onChange={state => {
        this.setState({
          input: state.target.value
        })
      }}></input>
      <p>{this.state.input}</p>
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 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

So your code is correct, how exactly?

  • Did you write the handleChange(), as the lesson guided?
  • Did you bind that handleChange() to the controlled component’s scope, as the lesson guided?
  • Lastly, did you set the value of the input to the value of this.state.input, as the lesson guided?

From here, it looks like there are a few pieces missing. Yes, you included the function as an anonymous inline function, and I’m not sure whether it’ll pass the test or not, but the last point is a telling one.

There are three sections in that sample code that indicate places to insert your own code.

  1. In the constructor function, is where any event handler binding should happen.
  2. Just after the constructor function, is where another class method would be defined, for the handleChange function.
  3. And inside the render function, would put your <input> element just above the <h4> tag, which your code has removed.