Conditionally set input values with values from other inputs with react-hook-form

I’m using react-hook-form for a basic signup flow where the user is signing up for our services. The user is asked for their current address, and later on, is asked if a co-applicant is also registering for our services. Assuming they answer ‘yes’, they’re later asked if the co-applicant lives at the same address as the primary applicant. If they do, we want the co-applicant address fields to be pre-populated with the data already filled out with the primary applicant’s address so they don’t have to enter the same information again. If the co-applicant doesn’t live with the primary applicant, they obviously fill out a separate address.

My problem is: when the co-applicant shares an address, the actual inputs are filled out correctly–it looks correct. But when I submit the form, the actual values are undefined. I’m familiar with the setValue API but I feel that there is a better way to get the desired effect without imperatively calling setValue for 5-6 inputs based on the boolean value coapplicantLivesWithPrimaryApplicant.

This is where I’m setting the primary applicant’s address:

<fieldset>
  <Label htmlFor="city">City</Label>
    <Input
      autoComplete="address-level2"
      {...register("currentAddress.city")}
    />
</fieldset>

Later on, I’m asking if the co-applicant lives with the primary applicant. To keep this as short as possible, I’m using a <select /> element for this and ultimately ends up as a boolean. I’m then watching this value with the variable watchCoapplicantLivesWithApplicant. Let’s move forward assuming this variable evaluates to true.

Later on, when the applicant arrives to the section of the form for the co-applicant’s address, the fields are already correctly filled out with the primary applicant’s address, but upon submitting the form, the values are actually undefined. Here is an example of one of the inputs:

<fieldset>
  <Label htmlFor="coapplicantCity">City</Label>
  <Controller
    control={control}
    name="coapplicantCity"
    render={({ field: { value, onChange } }) => (
      <Input
        autoComplete="address-level2"
        value={
          watchCoapplicantLivesWithApplicant === true
          ? applicantCity
          : value
        }
        onChange={onChange}
      />
    )}
  />
</fieldset>

Any help here would be greatly appreciated. I’ve played around with a few different combos, but they haven’t worked for me. Appreciate it!

Leave a Comment