Could you tell me whate happened step by step when I write my name into the field of input?
The following is what I think it is, please help me check the process if it is right, thanks!
When I write my name “Raymond” into the field of input
step1: handleChange function detected the event and get the value through method of event.target.value,and pass it to this.state.input
step2:both GetInput and RenderInput receive the vale through input props, so the field of input turns out to be what I write immediately and the RenderInput shows what I write at the same time.
If you can helo me correct the process how the coding dealing with this event, that would be helpful to me, as a newbie of react, 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
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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36
Challenge: Pass a Callback as Props
Link to the challenge: