Tell us what’s happening:
I have passed the test, but before I submit an issue, I am wanting to understand the discrepancy between the challenge and the Challenge Guide. The code below is obviously what you get when you start the challenge plus my 2 lines.
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 inputValue={this.props.input} 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36
.
Challenge: Pass a Callback as Props
Link to the challenge:
Challenge Guide Code 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>
);
}
}
Link to Challenge Guide
As you can see, the RenderInput
component is declared outside of the Insert code above/below section, and the render
method appears to be returning a div
with two nested objects (being the components)
Any ideas why this is?