In JavaScript, if you have two variables, let's say A (boolean) and B (string), and the following expression: !A && B. If A is true, then this should return false. But using this to make two different components alternate visibility doesn't work, where A is the state of visibility of one of these items.

I've wrote down a small test case. The expected result is to see only the red rectangle and then once you click, you see the blue rectangle. If you click again, they should alternate, and then you would see only the red one again. Right now, you see both at the same time.