The GetInput component should receive the MyApp state property inputValue as props and contain an input element which modifies MyApp state

The GetInput component should receive the MyApp state property inputValue as props and contain an input element which modifies MyApp state
0.0 0

#1

Tell us what’s happening:

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}/>
        <RenderInput input = {this.state.inputValue} handleChange = {this.handleChange}/>
        { /* 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/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/pass-a-callback-as-props


#2

Look again at which component you’re asked to pass handlechange :wink:


#3

Hi,

Gave you got your answer?

I am also stuck in this question today, I have done google see your question but not got any answer but @Layer told look again then I found my answer.

If yes then good other wise you will do more practice.

If you tired then then you can see this answer.

<GetInput input={this.state.inputValue} handleChange = {this.handleChange} />