Please Help. Create a controlled input

Please Help. Create a controlled input
0

#1

Don’t know what I’m missing here. Been over it a couple of times. HELP.

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

#2

You have a typo on this line. Make sure you are referencing the correct property of this.


#3

Yes, I ran it that way and am still can’t get the last task to clear. // 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
What am I overlooking.

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

#4

You corrected one problem and the created another. Outside the constructor method, you should never try to set the state directly. You must always use the setState method to do so.


#5

I replaced the setState. Still no change. So confused @ this point been stuck for the last day. Thank you so much for your patience and help.

 handleChange(event) {
      this.setState({
        input: event.target.value
      });
    }

#6

I did not notice it the first time, but you have a typo above. What kind of event is it?


#7

Pardon the timing, Life took hold for a mintue lol. I’m lost with your question, can you plz rephrase it .


#8

There is no such event as onCharge. I think you meant onChange.


#9

Ok, wheres the emoji hitting yourself upside the head lol, It at least for me most times its spelling. Thank you.