Modify values before submission

[tawhidurrahman]

I need help. I have a large form. There are several select fields for which I use react-select. Some select fields are nested. I'm using zod for schema validation.

const x = z.object({ 
  returnTo: z.object({ value: z.string(), label: z.string() }),
  ...someOtherFields
});

<Controller
              control={saleReturnForm.control}
              name="returnTo"
              render={({ field: { value, onChange } }) => (
                <ComboBox
                  placeholder="Store"
                  options={
                    stores
                      ? stores.storesInfo?.map((s) => ({
                          value: s.id as string,
                          label: s.name as string,
                        }))
                      : []
                  }
                  value={value}
                  onChange={(value) => {
                    onChange(value);
                  }}
                  isLoading={storeLoading}
                />
              )}
            />

But my API endpoint only accepts returnTo and other nested selects field values as a string. Can I modify values before submission?

[Moshyfawn]

The easiest way is to convert them in your onSubmit function before sending the data.

[tawhidurrahman]

Thank you. I was thinking about the same.