React - Binding input value to state

JavaScript
1

Tell us what’s happening:

I’m currently learning react.
In the form input, if you remove the ‘value={this.state.input}’ part, the code would still work the same, though it wouldn’t pass the third test.
Why do we even need that ‘value={this.state.input}’ part?

Your code so far

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    // Change code below this line
    event.preventDefault();
    this.setState(state => ({
      submit: state.input
    }))    
    // Change code above this line
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          {/* Change code below this line */}
          <input value={this.state.input} onChange={this.handleChange}></input>
          {/* Change code above this line */}
          <button type='submit'>Submit!</button>
        </form>
        {/* Change code below this line */}
        <h1>{this.state.submit}</h1>
        <h2>stateInputProp: {this.state.input}</h2>
        {/* Change code above this line */}
      </div>
    );
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Challenge Information:

React - Create a Controlled Form

2

Hope I understood your question correctly.
I see several reasons:

  1. To set default value
  2. To keep value after rerender
  3. Maybe to avoid some issues on auto-filling

It’s a good approach to sync data.

edited:
About 2nd point. For example, if you have an optional render for this text field state will keep the value independent on rendering this input.

1 Like