Troubleshooting react-hook-form useController with Tabs

In a recent endeavour of building a multi-step form divided by tabs in React, I found myself facing an issue that seemed confusing at first. The challenge revolved around managing state across different tabs, each representing a step of the form. I set up my initial state to cater to three steps, intending to capture specific details in each. However, as I switched between tabs, I noticed that the state wasn’t pointing to the current tab but remained stuck on the first one. This blog post explains my journey through understanding and resolving this issue, which might help others facing similar challenges.

Summary of the Problem

I initialized my form with a structured initial state divided into separate objects for each tab. Using react-hook-form, I tried to manage the state, but each tab interaction did not update my component state as expected. Despite the tab change being detected, the form values seemed to persist from the first tab, ignoring subsequent tab selections.

Initial Setup

To start with, I defined an initial state for the form like this:

const initialValues = {
  step1: {
    statement: '',
    weight: '',
    statements: [],
  },
  step2: {
    statement: '',
    weight: '',
    statements: [],
  },
  step3: {
    statement: '',
    weight: '',
    statements: [],
  },
};

The idea was to have separate states for each form section accessible by tabs. I then set up the form, integrating react-hook-form to utilize its capabilities for managing form data:

import { useForm, FormProvider } from 'react-hook-form';

const Form = () => {
  const methods = useForm({ defaultValues: initialValues });

  const onSubmit = () => {
    methods.handleSubmit((data) => console.log('data: ', data));
  };

  return (
    <form onSubmit={onSubmit}>
      <FormProvider {...methods}>
        <section>
          {/* Tab content */}
        </section>
      </FormProvider>
    </form>
  );
};

export default Form;

Handling Dynamic Tabs

For managing dynamic tabs, I created a TabContent component where different form sections would be rendered based on the active tab:

import React from 'react';
import { useController } from 'react-hook-form';

const Feature = ({ tabName }) => {
  const {
    field: { value, onChange: fieldOnChange },
  } = useController({ name: tabName });

  useEffect(() => {
    console.log('tabName: ', tabName); // This updates correctly
    console.log('value: ', value); // Incorrectly retains the initial tab's value
  }, [tabName, value]);

  return (
    <React.Fragment>
      <h1>{tabName}</h1>
      <input onChange={(e) => fieldOnChange({...value, statement: e.target.value})} value={value.statement} />
      <input onChange={(e) => fieldOnChange({...value, weight: e.target.value})} value={value.weight} />
    </React.Fragment>
  );
};

export default Feature;

Identifying the Issue

Upon closer inspection, the main issue stemmed from incorrectly addressing state changes and the misconfiguration in dynamically associating form fields with corresponding tab data. My initial thought was that each tab would maintain its state object, but the binding with the useController from react-hook-form was not setup correctly to update based on the active tab.

Solution

To resolve this, I needed to adjust how state changes were being distributed across tabs:

Tab Name as Key: Ensure that each input within the tabs dynamically references the correct part of the state based on the current tab. This means dynamically setting the tab name in the name and value properties.

Correct Data Handling: Use the tab name to correctly retrieve and update values from the state, rather than statically pointing to a single tab’s values.

By applying these changes, each tab correctly interpreted and managed its state, reflecting the intended dynamic behavior of the multi-step form.

Conclusion

What seemed like a minor oversight in state management provided valuable lessons in handling dynamic forms in React with react-hook-form. It emphasized the importance of accurately mapping state to UI components, especially in complex scenarios involving multiple data segments and interactions. Hopefully, this solution aids others facing similar issues in their projects, ensuring smoother development experiences and robust applications.