How to solve a problem with a higher order function?

user_18119766 0
Viewed 47

I don't seem to fully understand how "closing" works. I have an input when changing which I need to call functions and pass 2 arguments to it. But I also need the event of this event.

My version below doesn't work. Only the first part of the function will work, and the second (where I return the second function) does not work. I can not, unfortunately, understand what is my mistake and how to make the "closure" to the end.

And the second, mini, question - how exactly to type event here if I'm working in react?

const handleChangeClosure = (userId: string, role: string) => (event: ???) => {
  const { checked } = event.target;
  dispatch(addOrDeleteRoleAction(userId, role, checked, dispatch));
};

<input type="checkbox" onChange={() => handleChangeClosure(user.userId, "Controller")}/>
typescript reactjs javascript
2 Answers

Replace

<input type="checkbox" onChange={() => handleChangeClosure(user.userId, "Controller")}/>

With

<input type="checkbox" onChange={handleChangeClosure(user.userId, "Controller")}/>

The handleChangeClosure function returns a function and the onChange event expects a function. So you don't need ()=> which would just wrap it in another function.

Alternatively, this would also work:

<input type="checkbox" onChange={(ev) => handleChangeClosure(user.userId, "Controller")(ev)}/>

But that's just more useless code.

user_63334440

By using onChange={() => ...}, you're losing the event argument.

What you want is

<input type="checkbox" onChange={handleChangeClosure(user.userId, "Controller")}/>

Your higher-order-function returns a new event handler function that will be attached to the change event.

FYI the type for event is React.ChangeEvent<HTMLInputElement>

const handleChangeClosure =
  (userId: string, role: string) =>
  (event: React.ChangeEvent<HTMLInputElement>) => {
    const { checked } = event.target;
    dispatch(addOrDeleteRoleAction(userId, role, checked, dispatch));
  };
user_2833660
Related