React: Create a Controlled Input

Challenge Name

React: Create a Controlled Input

Issue Description

I think I have the correct code and it is working like it is supposed to, but I’m not passing the test.

Browser Information

Chrome 64 (64 Bit) Windows 10 Desktop

Your Code

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

Screenshot

[bqnguyen94]

You forgot to add value to input:

In the render method, create the input element above the h4 tag. Add a value attribute which is equal to the input property of the component’s state. Then add an onChange() event handler set to the handleChange() method.

[blackboldse]

First step will be making a function that changes the state variable input.

Add a value attribute which is equal to the input property of the component’s state. Then add an onChange() event handler set to the handleChange() method.

Remember to bind this to the function.

And you can try with solution if you forget bindings in the constructor:

Hope reply for help.

Enjoy!