What is the point of wrapping a function of react component if i want to pass it down as a property?

Question

What is the point of this? In the next example i found in book code we have a funtion in the component that changes component state createTimer()

createTimer = (timer) => 
{
   const t = helpers.newTimer(timer);
   this.setState({
     timers: this.state.timers.concat(t),
   });

   client.createTimer(t);   
};

It is wrapped:

handleCreateFormSubmit = (timer) => {
this.createTimer(timer); };

And passed down as property:

<ToggleableTimerForm
onFormSubmit={this.handleCreateFormSubmit}
/>

See https://stackoverflow.com/q/20279484/1048572 and https://stackoverflow.com/q/31362292/1048572 — Bergi, Sep 19 '18 at 20:27

score 1 · Accepted Answer · answered Sep 20 '18 at 00:06

If you just do this:

<ToggleableTimerForm onFormSubmit={this.createTimer}/>

...and createTimer is a regular method of your class:

class YourComponent extends Component {
  createTimer(timer) {
    const t = helpers.newTimer(timer);
    this.setState({
      timers: this.state.timers.concat(t),
    });

    client.createTimer(t);
  }
}

...then the issue would be that when the child component calls onFormSubmit, this wouldn't be set correctly.

But since you're setting a property of your instance and are using an arrow function:

class YourComponent extends Component {
  createTimer = (timer) => {
    const t = helpers.newTimer(timer);
    this.setState({
      timers: this.state.timers.concat(t),
    });

    client.createTimer(t);   
  };
}

...you don't have to worry about this being bound correctly, so you're right that you don't need the wrapper to fix that. Perhaps the wrapping function is there as a precautionary measure since the class method pattern is more common.

The only benefit you'd gain is if the child calls this.props.onFormSubmit with additional arguments that you want to ignore. If that's not the case, then you can leave out the wrapping function.

What if i won't declare createTimer as arrow function but declare it as a simple function that require binding to class, should i wrap it and pass to property wrapper? — Bash Lord, May 02 '19 at 21:33
@BashLord: if you bind it to the instance with, say `this.createTimer = this.createTimer.bind(this);`, then you don't need to wrap it since no matter how it's called, `this` will be established properly. — Jacob, May 02 '19 at 22:16

Eddie D · Answer 2 · 2018-09-19T21:54:08.583

Generally you pass a function down that's bound to it's original component. This allows child components to alter the state of their parent. Imagine this Scenario :

I have a parent component with state property A. I have a function that takes an input and updates the state of the PARENT!!!! I pass that as a prop to a child (maybe a form). When I submit the form, I call the function passed as a prop to update the PARENTS state with my form values.

A few things to keep in mind, lexical arrow functions LACK SCOPE, and if the function leverages the state of the component it must be bound to the component.

One problem I see in your code....

handleCreateFormSubmit requires a parameter. onFormSubmit will pas it one, but I don't think it'll be the one you're expecting. It'll pass the event. You can do something along these lines "

onFormSubmit={() => this.handleCreateFormSubmit(someValue)}

What is the point of wrapping a function of react component if i want to pass it down as a property?

2 Answers2