React: Pass a Callback as Props

1

I’ve looked at this for long enough now and reset the code a few times and can’t quite see what i’m doing wrong. Everything looks like it should work to me but i’m failing the last test case.

I’m passing this.state.inputValue as input and this.state.handleChange as handleChange into GetInput.
I’m passing this.state.inputValue as input into RenderOutput.

Is it a simple mistake and I’m not seeing it?

My Code:

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.state.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>
    );
  }
};

Screenshot of my test cases after running:

image
image1427×814 164 KB

2

In MyApp, handleChange lives in this, not this.state. Instead of passing this.state.handleChange, pass this.handleChange.

1 Like
3

Thanks so much. I can’t believe I didn’t notice that. I even looked at other threads about this question and couldn’t see what I did wrong.

this.state = {
  inputValue: ''
}

only one property in there… :rofl: