Photo by Theo Crazzolara on Unsplash

Spot the Bug: Function Curry

Jack Taylor
2 min readJun 20, 2022

In this instalment of ‘Spot the Bug’, we have a simple React toggle component which switches between active and inactive when clicked. However, it’s not working as expected. Can you see what the problem is?


The problem here is with how we’re passing the toggleActiveState function to the onClick handler of the button. toggleActiveState is a curried function which takes the activeState boolean and returns another function which sets the active state to the value passed in. This can be a neat way to handle passing a function to an event handler with a parameter.

However, in this instance we are passing a new arrow function to the onClick handler and calling toggleActiveState with the opposite of the current isActive state — but this just returns the function to update the state with the new value, which is never actually being called.

The solution is to call the toggleActiveState function directly in the onClick handler:

Here, the onClick handler is now calling the toggleActiveState function which returns a new function which updates the active state with the correct value when the button is clicked.

Another solution would be to get rid of the currying altogether, and just set the state directly in the onClick handler:

Which solution do you prefer?

Jack Taylor

I am a UI developer writing about JavaScript, React and tech in general. Currently working at Pleo.

Recommended from Medium


See more recommendations