Utilising a union and record type for type safe and exhaustive conditional rendering While switch in the context of React is an improvement, unfortunately, a switch statement is not exhaustive like pattern matching in a functional language. Instead, a more maintainable and compact solution is used. It is essentially a lookup table using an object - but with added type-safety, which allows TypeScript to ensure all states are included. To begin with, I created a union type that contains all possible states. The union isn’t an absolute necessity for this general pattern, but it’s how I can enforce type-safety and exhaustive pattern matching. A union, as those familiar with TypeScript will know, can be a union of disparate types - not just strings. For this particular example, strings work well. They will be passed as props to the React component.
