Imagine a simple a Radio component, what returned its passed value prop on mouse click. It’s easily typable as a string, and flow won’t complain about it.
But what about if we wrap this component into an other where we dinamically create these radio components with mapping through a union typed Array.
The issue what I had to faced with came up here. When in the main component I created the onChange method, I typed the possible return values as the LiveblogControlsStatus union type. Flow started dropping its errors, like below. This happened because in the Radio component the onClick method returned the input’s value what was a string so it didn’t match with the union type I declared with three possible values: Queued, Live and Ended.
To keep the component well typed and more stable and safer for future development it wasn’t a question I need to find a solution for this and make the Radio component flexible to return a custom typed value.
For this at first I had to create a polymorphic type in the Radio function as the ValueType and pass down this value to its props. I Had to do the same where I defined the Props type and use this value as both the type of the value prop and the return value of the onClick method.
With this process we declared whatever type the value prop is, when the onClick callback will be called, its attributes will be the same type as the value.