1.5 KiB
1.5 KiB
title |
---|
Pass a Callback as Props |
Pass a Callback as Props
Description
- Add the
GetInput
component to the render method in MyApp, then pass it a prop calledinpu
t assigned toinputValue
from MyApp's state. Also create a prop calledhandleChange
and pass the input handlerhandleChange
to it. - Add
RenderInput
to the render method in MyApp, then create a prop calledinput
and pass theinputValue
from state to it.
Hints
state
is a property ofMyapp
class, so use 'this.state' to get the object value- To learn more about state and props, read State and Lifecycle and Components and Props.
Solution
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}/>
}
{ /* change code above this line */
<RenderInput input={this.state.inputValue}/>
}
</div>
);
}
};