CHALLENGE: Create a reusable form component with typescript (code included)

[ben519]

I know this has been discussed many times, but I wanted to share this minimal reproducible example for those working on the problem.

Setup

This example mocks structures for creating and updating quizzes for school children. The basic idea is that a quiz creator can make a

1. multiple choice question or
2. free text question

These structures share some common elements, but are not 100% identical. Furthermore, each question type has Create and Update variations.

import { FieldPath, UseFormRegister, UseFormSetValue } from 'react-hook-form'

// Multiple-choice question
export type CreateMultipleChoiceQuestionFormData = {
  options: string[]
  question: string
  type: 'multiple-choice'
}

export type UpdateMultipleChoiceQuestionFormData = {
  id: string
  options: string[]
  question: string
  type: 'multiple-choice'
}

// Free-text question
export type CreateTextQuestionFormData = {
  question: string
  type: 'text'
  passage: string | null
}

export type UpdateTextQuestionFormData = {
  id: string
  question: string
  type: 'text'
  passage: string | null
}

// Unions
export type CreateQuestionFormData =
  | CreateMultipleChoiceQuestionFormData
  | CreateTextQuestionFormData

export type UpdateQuestionFormData =
  | UpdateMultipleChoiceQuestionFormData
  | UpdateTextQuestionFormData

export type WriteQuestionFormData = CreateQuestionFormData | UpdateQuestionFormData

// Forms that include WriteQuestionFormData
export interface CreateMathTestFormData {
  questions: WriteQuestionFormData[]
  subject: 'math'
  professor: string
}

export interface CreateReadingTestFormData {
  questions: WriteQuestionFormData[]
  subject: 'reading'
  timeLimit: number
}

Challenge

Below is a re-usable component called PassageSubform that one could use to generate the passage text area input.

type FormDataUnion = WriteQuestionFormData | CreateMathTestFormData | CreateReadingTestFormData

interface PassageSubformProps<T extends FormDataUnion> {
  register: UseFormRegister<T>
  passageFieldPath: FieldPath<T>
}

export function PassageSubform<T extends FormDataUnion>(props: PassageSubformProps<T>) {
  const { register, passageFieldPath } = props
  return <textarea {...register(passageFieldPath)} />
}

At this point, everything works fine. But now lets attempt to include setValue as prop...

type FormDataUnion = WriteQuestionFormData | CreateMathTestFormData | CreateReadingTestFormData

interface PassageSubformProps<T extends FormDataUnion> {
  register: UseFormRegister<T>
  setValue: UseFormSetValue<T>
  passageFieldPath: FieldPath<T>
}

export function PassageSubform<T extends FormDataUnion>(props: PassageSubformProps<T>) {
  const { register, passageFieldPath, setValue } = props
  
  setValue(passageFieldPath, 'just a test') // <--- ERROR
  // Argument of type 'string' is not assignable to parameter of type 'PathValueImpl<T, Path<T>>'

  return <textarea {...register(passageFieldPath)} />
}

Herein lies the error and the crux of the challenge. How do we incorporate props like setValue, watch, control, etc. into this reusable component while maintaining type safety?

[ymor]

Ideally we would be able to solve this with Lens... but unfortunately it's not really possible :(
#12984