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:
