Pass a Callback as Props: Explain!

JavaScript
1

Can anyone explain the logic of this code and how it works? Especially event.target.value And onChange()
EDIT: I understand the logic now. Yet I fail to understand why do we need
value = {this.state.input}
I removed it and the page works fine without it.
Isn’t value kind of like a placeholder - a text that is initially in the textbox? So why to initialize it with the state property when the state input property is empty? Why not just leave it be?


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/67.0.3396.99 Safari/537.36.

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

2

Hi @graven_whismas

Assigning the value to internal state like that creates a controlled input, see here for better explanation then I could provide :smile:.