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

8

Yes that’s already the case

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

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

15

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

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 @camperextraordinaire 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
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

21

since the handleChange is an event I don’t know what I would send it

23 
> render() {
>     return (
>        <div>
>         { /* change code below this line */ }
>         <GetInput input={this.props.inputValue} handleChange={this.inputValue}/>
>         <RenderInput input={this.props.inputValue} />
>         { /* change code above this line */ }
>        </div>
>     );
>   }

tried
handleChange={this.props.inputValue}
handleChange={this.inputValue}
handleChange={this.handleChange}

no luck

Last breakdown. What is the pass down function handleChange being given if not the input?

Also, why is it even receiving a parameter?

25 
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} handleChange={this.handleChange}/>
        <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(this.handleChange)}/>
      </div>
    );
  }
};

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

All Errors, no Passes

26

Also this just fries my brain: handleChange={this.handleChange}

27

I’m going to take a break. Thanks to both of you for trying. I’m sorry I’m not getting it yet

29

¯\_(ツ)_/¯

I’m not following it at all I’m sorry. Not a clue what to do with RenderInput either. I don’t know what the requirements are or mean.

Test message: “”“The RenderInput component should receive the MyApp state property inputValue as props.”“”
Isn’t <RenderInput input={this.props.inputValue} /> doing that?? I guess not.
RenderInput is really just an output, and there is no input form element there. So this looks to be wrong as I don’t know how to send things to a child as props

  1. What is handleChange={this.handleChange} even doing? Just gives me a headache.
  2. After whatever that is, what is happening to this.handleChange inside GetInput?
  3. what’s the difference between the value={this.props.inputValue} inside the GetInput component and this.handleChange?
  4. why would I change the GetInput input value to this.props.input when input is not a prop? Typo on this.props.inputValue?
  5. If the child component GetInput already has an input value and I’m passing this.handleChange down from the parent to it, what is passing and running what?
  6. is there a clearer example somewhere that would explain this and doesn’t take hours and hours?

Thanks for all the help but I am just as lost now as before (minus the putting the method to pass down to the child, that was great).

Every little misunderstanding just compounds on itself. I don’t know the flow or the order or the expectation at any given point