Setting value in controlled form in React

1

Just curious if it is really necessary to set the value here:
value={this.props.input}

I can’t see any function of value. Is value sometimes needed but not actually needed in the div in this algorithm?

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
       <div>
        { /* change code below this line */ }
<GetInput input={this.state.inputValue} handleChange={this.handleChange}/>

<RenderInput input={this.state.inputValue} />

        { /* change code above this line */ }
       </div>
    );
  }
};

class GetInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Get Input:</h3>
        <input
          value={this.props.input}
          onChange={this.props.handleChange}/>
      </div>
    );
  }
};

class RenderInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Input Render:</h3>
        <p>{this.props.input}</p>
      </div>
    );
  }
};
2

Here you manually restrict browser from updating inner state of input element and instead force it to grab value from your app’s state. This concept is called Single source of truth.

3

Do you mean:

Here you manually restrict the browser FROM updating the inner state of the input element?

So you don’t want the browser to update the inner state?

4

Yeah, that’s correct