Problem with controlled input, react

i am kinda stuck, here, can anyone tell me what to do here?

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // Change code below this line
<input onChange = {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}/>
        { /* Change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

First off, in the future, use the Get Help -> Ask for help button. It will post your code here and give a link to the challenge so we don’t have to search for it.

For others trying to follow, it is here.

You have two issues:

    // Change code below this line
<input onChange = {this.handleChange.bind(this)}/>
    // Change code above this line

That is not how you bind this. This was covered a few lessons ago.


<input value = {this.state.input}/>

That is essentially right, but it is missing something. You need to tell it to fire off your handler function whenever the input changes. Just like that value attribute is set to a value, you need to set the onChange attribute to point to that method.

I found the hint for this item really seemed to split directions, and discerning appropriate instructions was not its aim. Useful Programmer, on YouTube, shows steps for this in sequence and is not duplicitous about the code fitting into the page. The exercise requires threading together some items that are pages between/out of reference, so remember to remind yourself where you’re doing what in the code, so the exercise really solidifies all effectively.

Your first edit is binding handleChange to this. As has been most familiarized in the exercises, this looks as follows:
this.handleChange = this.handleChange.bind(this);

Your second edit is suited as is.

Your third edit, for the input field returned within render, needs to include the onChange event, and you can accomplish this as so:
<input value = {this.state.input} onChange = {this.handleChange} />

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.