React Challenge Guide Discrepancy

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?

@Sky020 It appears the guide just needed an update. I have taken care of it as well as included the full code instead of just the MyApp class.

Ah. Thank you, Randell.