Pass a Callback as Props

Pass a Callback as Props
0.0 0

#1

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


#2

Hi @irufaan

You may want to re-read the challenge, you’re missing a prop on the GetInput component.


#3

Bro, Please help me, I’m stuck here. I already passed prop to GetInput component. And what can I do in GetInput Component?


#4

Add the GetInput component to the render method in MyApp, then 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.

You need to pass the handleChange function to GetInput so the component knows how to update input when the field is typed in

Like this:

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

#5

Thanks, bro. It was just my careless mistake. But, really you are very helpful and answer is very clear. Appreciate it. Cheers…