Create a Controlled Input (Veteran's Day)

Back End Help
#1

Tell us what’s happening:
So I’m confused to what put in the first part because it’s not clear to my understanding of where the function goes. Is it the first or second area where it’s requesting it to be placed?

I wrote
handleChange(event)

but I don’t know what to put next. I’m stuck as I am a visual learner.
Any resources you think that would help me figure it out would be swell.

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 */}
<input value = {this.state.input}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36.

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

#2

in the constructor, you should put a statement that binds the this keyword for the class to the member function handleChange. In the lower area, you should put your function definition for the handleChange event handler.

#3

So I’m now stuck on the last tick which I added what think is the solution it’s not going through even when looking at other’s code that said it works just to see.

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 (

    { /* change code below this line */}

    { /* change code above this line */}
    <h4>Controlled Input:</h4>
    <p>{this.state.input}</p>
  </div>
);

}
};

#4

What errors are you getting? I noticed that in the constructor, you set this.state.input to: ‘’, which is not simple quotes which represent the empty string, like "" or ''.

#5

I just got it! Thanks anyway vip.