Can't Pass < Pass a Callback as Props >

Can't Pass < Pass a Callback as Props >
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
          value={this.state.inputValue}
          onChange={this.handleChange} />
          <RenderInput
          value={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/68.0.3440.75 Safari/537.36.

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

i have no idea what is wrong with this.
it supposed to be worked out .
cant pass this.


#2

Your GetInput component is shown above. You have created a prop named value and have passed the inputValue from state to it. You have also create a prop named onChange and have passed the input handler handleChange to it.

The problem is, the instructions told you to “pass it a prop called input assigned to inputValue from MyApp’s state. Also create a prop called handleChange and pass the input handler handleChange to it.”

See if you can redo your code to meet the challenge requirements for the GetInput component first and then read through the exact requirements for the RenderInput component and fix it’s code.