I am a bit confused about creating a controlled input

JavaScript
1

Tell us what’s happening:

looks like there is a syntax error somewhere and also i think i am implementing the input tag wrongly.

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.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 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:

2

Hello there.

You have defined your method inside the constructor.

Hope this helps.

3

i have made corrections but the code isnt passing the last challenge

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) {
  event.setState({
    input:event.target.value
  });
}
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
    <input type="text" value={this.state.input} onChange={this.handleChange}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
     );
  }
};