i created a generic radio button that works fine. Now i'm attempting to do some validation and going with react hook form. I went through the docs and a few tutorials but i'm running into an issue where typescript yells at me. When i do away with generics it works fine. What i'm doing wrong. Will appreciate some assistance or guidance.
export interface RadioButtonProp<T> { data: T[] value?: T render: (item: T, index?: number) => ReactNode}export const RadioButton = <T,>(props: RadioButtonProp<T>) => { const { data, render } = props return (<Container> {data.map((item: T, index: number) => { return <RowContainer key={index.toString()}>{render(item, index)}</RowContainer> })}</Container> )}const Container = styled.View` margin-top: 5px;`const RowContainer = styled.View``Wrap around the controller to be used with react hook form:
export type RfhBadioButtonProp<T extends FieldValues> = RadioButtonProp<T> & UseControllerProps<T>export const RhfRadioButton = <T extends FieldValues>(props: RfhBadioButtonProp<T>) => { return (<Controller rules={props.rules} control={props.control} name={props.name} render={({ field }) => (<><RadioButton data={props.data} render={props.render} value={props.value || field.value} /></> )} /> )}In the form:
<RhfRadioButton control={control} name={'fruits'} data={['Apple', 'Oranges', 'Banana']} render={renderRadioButtons} value={fruit}/>Typescript complains:
Type 'Control<Fruit, any>' is not assignable to type 'Control<FieldValues, any>'. The types of '_options.resolver' are incompatible between these types. Type 'Resolver<Fruit, any> | undefined' is not assignable to type 'Resolver<FieldValues, any> | undefined'. Type 'Resolver<Fruit, any>' is not assignable to type 'Resolver<FieldValues, any>'