*as I'm suggesting.

Arguably same point as here can be made here... instead of the state being the className, it would be better for readaibility to have the state be something human-readable that describes what state the component is in (eg. isRevealed: boolean)

Agreed, I'll make that change in the revision!

From my understanding of transition, there isn't a simple / clean way to use transition when we're handling a click. Transition would've seemed better if spoilers were revealed on hover or active, but since we want a persistent style change, my understanding was a keyframe would be the better solution for this.

For example, if it was hover we could do:

span.spoiler {
  background: #33332c;
  color: #33332c;
  cursor: pointer;
  transition: color 1s, background-color 1s;
}

span.spoiler:hover {
   color: white;
   background-color: transparent;
}

With a click on the spoiler though, we're changing the spoiler style so we just want to simulate the spoiler tag fading away until it defaults to the new style, ie just transparent and white text

Happy to work more on transition though if you feel like it's the better move here, as I'm not super aware of transition besides that use case!

Understood! Appreciate the in-depth explanation... should be good as-is