Pass a Callback as Props [this.input.value]

JavaScript
1

Tell us what’s happening:
Hi Everyone,
I’m new to working with React, and I am having troubles with this concept.
I’ve passed the lesson, but I want to understand why the Input element requires a prop to render the input value.
In short:
Why do I need the input={this.state.inputValue} in this line?
GetInput input={this.state.inputValue} handleChange={this.handleChange}

I deleted the input={this.state.inputValue} snippet and the code works just fine. Just want to learn if there will be other consequences if I delete the code. Thanks!

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
          input={this.state.inputValue} 
          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>
    );
  }
};

Link to the challenge:

3

I don’t think so, and you didn’t point out where exactly did you have removed the code?

That line is required to get Value fromGetInput Component and pass the props into RenderInput to show the typed text.

And you are rendering both of these child components into Parent Class component ie MyApp
And you are passing props from Parent to Child components using

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

handleChange to setState and update the text typed.

I hope this will be clear to you (or) someone will post a better answer.

4

Hi Randore,
Thanks for your answer.
I posted the code snippet of the input element, but it was sanitized by the forum, so I edited out the tags. (you answered too fast!)

So my question is does the input element require to get the inputValue state from the Parent component, since the user is typing in the form anyways?
I deleted the input={this.state.inputValue} as a prop, and the form still works.