Maintain state of useFieldArray react-hook-form

Question

I built a multistep form using react-hook-form with a dynamic fields array using useFieldArray.

Documentation: useFieldArray documentation

Here is the full working code link: React Multi-step form with useFieldArray

In the 2nd step when I add new fields using add a dog button, everything works fine, the new data of step is saved to localstorage using little state machine.

But when I click the previous button, the added fields disappear whereas data is still in localstorage.

code for 2nd step:

import { useForm, useFieldArray } from "react-hook-form";
import { useStateMachine } from "little-state-machine";
import updateAction from "./updateAction";
import { useNavigate } from "react-router-dom";

function Step2(props) {
const {
    register,
    control,
    handleSubmit,
    watch,
    formState: { errors },
} = useForm({
    defaultValues: {
        test: [{ nameOfDog: "Bill", ageOfDog: "2", sizeOfDog: "small" }],
    },
});

const { fields, append, remove } = useFieldArray({
    control,
    shouldUnregister: true,
    name: "test",
});

const elements = watch("test");
console.log(elements, fields);

const { actions, state } = useStateMachine({ updateAction });
const navigate = useNavigate();
const onSubmit = (data) => {
    // console.log(fields);
    actions.updateAction(data);
    navigate("/step3");
};

let dta;
if (state.date2) {
    dta = new Date(state.date2);
} else {
    dta = new Date();
    dta.setDate(dta.getDate() + 1);
}

return (
    
        
            {fields.map((item, index) => {
                return (
                    
                        
                            Name:
                            
                            {errors.nameOfDog && (
                                This field is required
                            )}
                        
                        
                            Age:
                            
                            {errors.ageOfDog && (
                                This field is required
                            )}
                        
                        
                            Size in Lbs:
                            
                            {errors.sizeOfDog && (
                                Please Select an option
                            )}
                        
                        
                            
                        
                    
                );
            })}
            
                
                    
                
            
        

        {/*  */}
        
            
            
        
    
    );
   }

 export default Step2;

{fields.map((item, index) =>

whenever the previous button is clicked, fields array resets to default.

All the remaining steps of the form except 2nd step is being saved when we go back to previous step.

How do i keep the fields in the 2nd step saved when I click the previous button.

user_2015452 · Answer

There are two problems here:

you don't update your state in "Step 2" when you click on the "Previous" button. So you have to pass the current form data to your state machine. Additionally you also have no form validation for "Step 2" right now, when you want to go a previous step. To add support for validation you should move handleSubmit from the
element and instead pass it to your two

const onPrevious = (data) => {
  actions.updateAction(data);

  navigate("/");
};
const onNext = (data) => {
  actions.updateAction(data);

  navigate("/step3");
};

If you want to keep handleSubmit in the element, you should use watch and pass the data to your state machine before you navigate back to the previous step.

const test = watch("test");

const onPrevious = (data) => {
  actions.updateAction({ test });

  navigate("/");
};

as you reinitialise each step component on a step change you have to pass the current defaultValues to useForm for each step. For "Step 2" it would look like this:

const {
  register,
  control,
  handleSubmit,
  watch,
  formState: { errors }
} = useForm({
  defaultValues: {
    test: state.test ?? [
      { nameOfDog: "Bill", ageOfDog: "2", sizeOfDog: "small" }
    ]
  }
});

The important thing to change is, that when you pass the defaultValues for your fields within the useForm config, you should remove it from the components. I made it for "Step 1", so you have an example there.

user_16650991 · Answer

It's very long but maybe we can figure it out.

The use is correct, the problem in my opinion is that you're not checking the state and just printing the default values everytime

Maintain state of useFieldArray react-hook-form

2 Answers