Why is this button requiring 2 clicks to revert state in ReactJS?

Solution 1:

In your code basically when you click the first time you set priority to "btn_danger" and isPriority to 0. But isPriority is a normal variable so when the code re-renders, it again sets isPriority to 0 (although you set it to 1 previously, since value of normal variable does not persists between renders). Now when you click again, the if condition is true (since isPriority is 0) so it executes setPriority(). But since there is no change in the value inside setPriority() so no re-render occurs and the isPriority is set to 1. Again when you click the button, since isPriority is now 1 it behaves as you expect. As @M-Raw suggested above this is not the right way to handle this thing. (But it is a great way to understand how react works nontheless.)