Pass a Callback as Props Doesn't Explain what that is

JavaScript
#1

Tell us what’s happening:

I don’t understand the instruction to “”“Also create a prop called handleChange and pass the input handler handleChange to it.”""

am i making a variable called handleChange in the MyApp? Naming everything the same is confusing.

Last Two Errors

How to check --> “”“The RenderInput component should receive the MyApp state property inputValue as props.”""

How to check --> “”“The GetInput component should receive the MyApp state property inputValue as props and contain an input element which modifies MyApp state.”""

Am i setting something? Am i doing something? I have no idea what goes where. This isn’t teaching me what to do and why

Any help appreciated

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.props.inputValue} />
        <RenderInput input={this.props.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.inputValue}
          onChange={this.props.handleChange}/>  
/* Tried this.handleChange and this.handleChange(this.props.inputValue) as well */
      </div>
    );
  }
};

class RenderInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Input Render:</h3>
        <p>{this.props.inputValue}</p>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) 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

I think I mixed it up, I switched around input and inputValue. Corrected code above. However still getting the same two errors.

Am I passing something else or receiving props specifically?

Sorry I don’t understand what it is I’m supposed to do

#3

A function has been created for you, handleChange, which you pass to the child in a property with the same name handleChange

The idea behind this is that you can pass functions as well from parent to child, and have the child components interact via passing things in the parent

So in GetInput when the element changes, it calls handleChange() which changes the state of the parent component, which in turn changes what RenderInput displays

All of this is done simply by passing the function as a property which can be called upon change in a child.

(Don’t forget to pass it as {this.handleChange}

#4

isn’t that already happening with onChange={this.props.handleChange} ?

#5

If you don’t pass it in as a property, it cannot be called

#6

tried changing this.props.handleChange to this.handleChange and errors remain.

tried it as this.handleChange(this.props.inputValue) but it said this.handleChange is not a function

Thanks for your suggestions but I regret that I don’t know where to apply it

#7

Make sure to pass the handleChange prop in the following line of your MyApp’s render function. Currently you are only passing a prop named input.

        <GetInput input={this.props.inputValue} />
#8

Yes that’s already the case

#9

I was just basing my comment on the code currently showing in your first post. If you have made significant changes from what shows up there, please post your latest attempt in a new reply, so we can take a look.

#10

the code was already updated at the timestamp of my comment to my post (29 minutes ago). I don’t know what you’re seeing

#11

Sorry Walter I should have been a bit clearer in my last post, posted in a hurry

You have GetInput currently expecting a prop called handleChange but you never actually give it that property

That’s what I was getting at with that. You need to pass the GetInput component the property handleChange

#12

My last post of code showed exactly what I am seeing for the GetInput component inside your render, but I do not see where you are passing a prop named “handleChange”. I do see where you are passing a prop named “input” though.

Edit: @gebulmer and I are telling you the same thing.

#13

So I’m sending a prop a prop? I’m sorry I’m not trying to be obtuse, I don’t know what I don’t know… Hmm… tried

onChange={this.props.handleChange(this.handleChange)}/>

that looks really confusing

Ok let’s back up. How am I sending a class method as a prop? You’re saying this.handleChange. Wouldn’t the value of the input tag be the value to the method?

can we break this down? I’m clearly missing something

#14

I will give you a big hint:

<GetInput input={this.props.inputValue} handleChange={??????}/>
#15

Can you tell me which line number you are referring to? I might be looking somewhere else

#16

Inside the render method of MyApp.

  render() {
    return (
       <div>
        { /* change code below this line */ }
        <GetInput input={this.props.inputValue} /> <!-- this is the line -->
        <RenderInput input={this.props.inputValue} />
        { /* change code above this line */ }
       </div>
    );
  }
#17

I’m sorry this is more confusing. How is handleChange a property of GetInput?

#18

Honestly this is the hardest thing about React, and once this ‘clicks’ it’ll seem so obvious in hindsight

We have two components here doing different things, but they’re connected like parent and child. We can pass things from parent to child via properties.

We pass them in in a way that looks exactly like html attributes, just as you’ve done already with input

The receiver, the child component, can then use what it has been given by its parent, via it’s props object

Note though, it cannot use what it has not been given, which is precisely what @RandellDawson is getting at - you need to pass in the function via a property in order for the child to be able to use it

2 Likes
#19

100% agree with @gebulmer on this. I struggled with understanding passing props for a while, but then the light bulb turned on and then I wondered how I ever was confused.

#20

Ah I see thanks. So I send it as an attribute to the child. That I can understand, thank you.

As for the parameter its sent, it’s not just the input again? I tried a few and it just says this.props.handleChange is not a function