Something hard to see

This is an experience that happened yesterday, February 4th 2020 with an example in Dev.to: Introduction to State Machines in React

The exercise is interesting in itself. But, spent quite some time wondering why it didn't work for me. The problem wasn't the state machine (in Xstate) but the JSX and how I was dealing with it.

My solution to the small inconvenience

The last definition of the const is the exercise requirement. See how difficult is to distinguish the space after "navbar-menu". So I chose the first definition. It is a bit longer but easy to see.

Later I published this experience in Twitter and got a suggestions: clsx, just a simple utility to add spaces between classes. Not useful in my case, as it is only one line but for projects that involve changing classes or adding them it certainly will be useful.