Why do we need two references to the state value in our Get Input Component?

Tell us what’s happening:
Why do we need value={this.props.input} in our GetInput component? I am confused as the handleChange handler sets the characteristics of value in the MyApp component and is referenced directly afterwards via onChange={this.props.handleChange}?

Your code so far


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>
  );
}
};

Your browser information:

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

Challenge: Pass a Callback as Props

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/react/pass-a-callback-as-props

I’ve answered couple hours before here: