Im not able to type in the input field in the GetInput component
I dont know what Im missing in this problem… Can anyone help me with this?
The GetInput component should receive the MyApp state property inputValue as props and contain an input element which modifies MyApp state.
** 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
//code
});
}
render() {
return (
<div>
{ /* change code below this line */ }
<GetInput input= {this.state.inputValue} />
<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>
);
}
};
Browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
.
Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/pass-a-callback-as-props