Create-a-controlled-input

Tell us what’s happening:
Why the last one is not passing the tes.
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.

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

Your browser information:

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

Link to the challenge:

3 Likes

Finally!, I am able to crack the challenge

<input type="text" onChange={this.handleChange} value={this.state.input} />

9 Likes

Thanks! I just had the same issue and this fixed it. It could be more directly mentioned in the lesson instruction.

1 Like

I had the same issue! many thanks @Randore

Cool, it helps me pass the test. But I have one question here:

onChange={this.handleChange}

Why we don’t need a parameter for handleChange here? Since the method handleChange needs one parameter when it is defined. Please help me with this.

Because in constructor you binded handleChange and handleChange() method together. So in onChange event, you are calling handleChange, not the method.

This one was eFFing HARD,

4 Likes

The problem could be in this line: :face_with_monocle:

Because you are calling a value of the state but the state doesn’t have any key related with that object:

To solve that, you have to use the input instead of value.

1 Like