React hook form returns undefined for controlled inputs.- react-select component

[sethumadh]

In my code below , I am trying to update the values of the subjectName using a Select component.
From the debugging , the watch function and the field.value at the render function of the Controller gives the updated selected option.
But upon submission , the subjectName value is set to undefined.

alternatively , i used an input field (which is commented out above the Controller component )to check if the names are correctly set. And so when i update using input field, values received upon submission are updated /expected values.

I am using the reset function to load values when the component mounts.

the code I am using is;

`const initialAssignments = [
{
id: 1,
name: "10AM - 11AM",
rooms: [
{
roomId: 1,
teacherId: 1,
teacherName: "Mr. Smith",
subjectName: "english.L1.S1",
},
{
roomId: 2,
teacherId: 2,
teacherName: "Ms. Johnson",
subjectName: "english.L1.S2",
},
{
roomId: 3,
teacherId: 3,
teacherName: "Mr. Lee",
subjectName: "french.L1.S3",
},
{
roomId: 4,
teacherId: 4,
teacherName: "Mr. doe",
subjectName: "french.L2.S1",
},
{
roomId: 5,
teacherId: 4,
teacherName: "Mr. will",
subjectName: "french.L2.S1",
},
{
roomId: 6,
teacherId: 4,
teacherName: "Mr. sam",
subjectName: "french.L2.S1",
},
],
},
...
]

const NUM_ROOMS = 6

export default function TimeTable() {
// const [assignments, setAssignments] = useState(initialAssignments)
const [isEditMode, setEditMode] = useState(false)
const {
register,
handleSubmit,
control,
formState,
reset,

getValues,
watch,

} = useForm({
resolver: zodResolver(timetableSchema),
// defaultValues: [...initialAssignments],
})
console.log(formState.errors)
useEffect(() => {
reset([...initialAssignments])
}, [reset])

const {
data: currentTermClassesData,
// isLoading: _currentTermClassesLoading,
} = useQuery({
queryKey: [api.admin.classes.findCurrentTermAllClass.querykey],
queryFn: api.admin.classes.findCurrentTermAllClass.query,
})
const transformedData = useMemo(() => {
const data: { value: string; label: string }[] = []

currentTermClassesData?.termSubjectLevel?.forEach((item) => {
  const subjectName =
    item.subject.name.charAt(0).toUpperCase() + item.subject.name.slice(1)
  const levelName = item.level.name

  item.sections.forEach((section) => {
    const sectionName = section.name
    const label = `${subjectName} ${levelName} ${sectionName}`
    const value = `${subjectName.toLowerCase()}.${levelName}.${sectionName}`

    data.push({ label, value })
  })
})

return data

}, [currentTermClassesData])

const onSubmit = (data: TimetableSchema) => {
console.log("submite", data)
setEditMode(false)
}
// console.log(transformedData)

console.log(getValues(), "GETVALUE")
return (

Time Table

Edit and Manage your timeTable

<button
type="button"
onClick={() => setEditMode(!isEditMode)}
className="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
{isEditMode ? "Cancel" : "Edit"}

submit

{Array.from({ length: NUM_ROOMS }, (_, index) => (

))}



{initialAssignments.map((timeslot, index) => {
return (


{timeslot.rooms.map((room, roomIndex) => {
return (
<td
key={room.roomId}
className={px-3 py-3.5 text-sm text-gray-500 border-4 shadow-sm w-32 h-20 ${ !room.teacherName && !room.subjectName && !isEditMode ? "bg-red-300" : "" } ${ room.teacherName && room.subjectName && !isEditMode ? "bg-green-300" : "" }}
>
{isEditMode ? (

<input
type="text"
defaultValue={room.teacherName}
{...register(
${index}.rooms.${roomIndex}.teacherName as const
)}
className={mb-2 block w-full rounded-md shadow-sm }
/>

                          {/* <input
                            type="text"
                            defaultValue={room.subjectName}
                            {...register(
                              `${index}.rooms.${roomIndex}.subjectName` as const
                            )}
                            className="block w-full rounded-md border-gray-300 shadow-sm"
                          /> */}
                          <Controller
                            control={control}
                            name={
                              `${index}.rooms.${roomIndex}.subjectName` as const
                            }
                            defaultValue={room.subjectName}
                            render={({ field }) => {
                              const s = watch(
                                `${index}.rooms.${roomIndex}.subjectName`
                              )

                              console.log(s, index, roomIndex, "watch")
                              console.log(field.value)
                              return (
                                <Select
                                  className=""
                                  isSearchable
                                  isClearable
                                  {...field}
                                  options={transformedData}
                                  value={transformedData.find(
                                    (option) => option.value === field.value
                                  )}
                                  onChange={(
                                    option: SingleValue<{
                                      value: string
                                      label: string
                                    }>
                                  ) => {
                                    console.log(option)
                                    return field.onChange(
                                      option?.value ?? ""
                                    )
                                    // const newValue = option
                                    //   ? option.value
                                    //   : ""
                                    // setValue(
                                    //   `${index}.rooms.${roomIndex}.subjectName`,
                                    //   newValue
                                    // )
                                  }}
                                />
                              )
                            }}
                          />
                        </div>
                      ) : (
                        <>
                          <span></span>

                          <ul
                            role="list"
                            className="border-blue-500 flex flex-col space-y-8"
                          >
                            {!room.teacherName && !room.subjectName && (
                              <span className="flex justify-center items-center">
                                <span className="text-center text-lg font-light italic">
                                  No classes Scheduled
                                </span>
                              </span>
                            )}
                            {room.teacherName && room.subjectName && (
                              <>
                                <li>{room.teacherName}</li>
                                <li>{room.subjectName}</li>
                              </>
                            )}
                          </ul>
                        </>
                      )}
                    </td>
                  )
                })}
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  </div>
</form>

)
}
`

Time/ Rooms	Room {index + 1}
{isEditMode ? ( <input type="text" defaultValue={timeslot.name} {...register(${index}.name as const)} className="rounded-md border-gray-300 shadow-s" /> {formState.errors?.[index]?.rooms?.root ?.message && ( <> Unique Teacher Name required </> )} ) : ( {timeslot.name} )}