The above is passing a prop named handleChange to the GetInput component. The value that is being pass is the method defined in the MyApp’s constuctor. That method is this.handleChange. What may be throwing you off is how there are so many places where we are writing handleChange. I am going to rewrite MyApp component and the GetInput component differently for illustrations purposes only. Writing the code this way will not pass the challenge, but will hopefully let you see what is going on better. I have removed all references to the RenderInput component in the code below.
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
myChanger={this.handleChange}
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.myChanger}/>
</div>
);
}
};
You will notice above I am passing a prop named myChanger instead of handleChange and I assigned it the method this.handleChange, because I want to be able to assign this function to the onChange event handler in the GetInput component. You will also notice, I am passing a prop named input and assigning the value this.state.inputValue to it (per challenge instructions).
Inside the GetInput component, I want to get the two props values passed from the parent component (MyApp) and assign them to their respective attributes of the input element inside GetInput. Since I passed a prop named input, I have to reference this.props.input if I want that value to appear as the value inside the input element.
Per the challenge instructions, I am suppose to update the inputValue property of the state of MyApp when the content of the input box changes (i.e. typing). The handleChange method in MyApp makes that update, but to use it, I had to pass it into GetInput via a prop named myChanger, so I need to assign the onChange attribute the value of the myChanger prop. To do this, I assign this.props.myChanger to the onChange attribute.
Questions #2 - #6
I am hoping my detailed explanation above makes answers the majority of the remaining questions. If not, then please ask for any clarifications.