multi step form in react taking wrong validation

Question

I am writing my problem as a fresh part here.

I made a multi step form where I have on dynamic filed in 1st form, that field is to create password manually or just auto generated.

So my multi step form is working fine going to and forth is fine, but I have to pass the fields to main component so it can check for validation, and I am passing that password too

Here comes the issue

When i pass the password field also then it takes the validation even when I have click on auto generated password

I am passing fields like this fields: ["uname", "email", "password"], //to support multiple fields form

so even not check on let me create password it takes the validation.

When i click let me create password and input some values then click on next and when I comes back the input field sets to hidden again to its initial state I know why it is happening, because when I come back it takes the initial state allover again.

i am fed-up with this thing for now, I have tried many things but didn't work below is my code

    import React, { useState, useEffect } from "react";
import Form1 from "./components/Form1";
import Form2 from "./components/Form2";
import Form3 from "./components/Form3";
import { useForm } from "react-hook-form";

    function MainComponent() {
      const { register, triggerValidation, errors, getValues } = useForm();
      const [defaultValues, setDefaultValues] = useState({});
    
      const forms = [
        {
          fields: ["uname", "email", "password"], //to support multiple fields form
          component: (register, errors, defaultValues) => (
            <Form1
              register={register}
              errors={errors}
              defaultValues={defaultValues}
            />
          )
        },
        {
          fields: ["lname"],
          component: (register, errors, defaultValues) => (
            <Form2
              register={register}
              errors={errors}
              defaultValues={defaultValues}
            />
          )
        },
        {
          fields: [""],
          component: (register, errors, defaultValues) => (
            <Form3
              register={register}
              errors={errors}
              defaultValues={defaultValues}
            />
          )
        }
      ];
    
      const [currentForm, setCurrentForm] = useState(0);
    
      const moveToPrevious = () => {
        setDefaultValues(prev => ({ ...prev, ...getValues() }));
    
        triggerValidation(forms[currentForm].fields).then(valid => {
          if (valid) setCurrentForm(currentForm - 1);
        });
      };
    
      const moveToNext = () => {
        setDefaultValues(prev => ({ ...prev, ...getValues() }));
        triggerValidation(forms[currentForm].fields).then(valid => {
          if (valid) setCurrentForm(currentForm + 1);
        });
      };
    
      const prevButton = currentForm !== 0;
      const nextButton = currentForm !== forms.length - 1;
      const handleSubmit = e => {
        console.log("whole form data - ", JSON.stringify(defaultValues));
      };
      return (
        <div>
          <div class="progress">
            <div>{currentForm}</div>
          </div>
    
          {forms[currentForm].component(
            register,
            errors,
            defaultValues[currentForm]
          )}
    
          {prevButton && (
            <button
              className="btn btn-primary"
              type="button"
              onClick={moveToPrevious}
            >
              back
            </button>
          )}
          {nextButton && (
            <button className="btn btn-primary" type="button" onClick={moveToNext}>
              next
            </button>
          )}
    
          {currentForm === 2 && (
            <button
              onClick={handleSubmit}
              className="btn btn-primary"
              type="submit"
            >
              Submit
            </button>
          )}
        </div>
      );
    }
    
    export default MainComponent;

please check my code sand box here you can find full working code Code sandbox

Answer 1

React Hook Form embrace native form validation, which means when your component is removed from the DOM and input state will be removed. We designed this to be aligned with the standard, however we start to realize more and more users used to controlled form get confused with this concept, so we are introducing a new config to retain the unmounted input state. This is still in RC and not released.

useForm({ shouldUnregister: true })

Solution for now:

1. break into multiple routes and store data in the global store

https://www.youtube.com/watch?v=CeAkxVwsyMU

2. bring your steps into multiple forms and store data in a local state

https://codesandbox.io/s/tabs-760h9