Photo by Theo Crazzolara on Unsplash

Spot the Bug: Function Curry

Jack Taylor

--

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?

Solution

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:

--

--

Jack Taylor
Jack Taylor

Written by Jack Taylor

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