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