Reactjs controlled input not working?

JavaScript
1

Hi I am working on React: Create a Controlled Input
I am not sure why my solution isn’t working. I am able to see the desired results. Can anyone please take a look.

freecodecamp question react
freecodecamp question react1856×972 192 KB

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

Hello there,

Have a think about your component’s state, and this line:

<input type='text' value={this.state.value}

For future posts, if you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

3

Thank you
It worked by changing

this.state.input
to
this.state.value

But why was it working this.state.value if value isn’t part of state?

4

This is more of an accessibility issue, than anything else. It works for the same reason, if your remove the value attribute from the input it still works…because HTML is very forgiving, and any text input into the input will automatically be stored in the value of that input.

1 Like