i have a component called CommonCheckPage that renders another component called CommentTextAreaInput and passes to it some data via props.

I have several screens and each screen has it’s state. Depending on each screen state data i get some data from redux store in useCheck hook. The useCheck creates react-hook-form using useForm hook and the created object returns from the useCheck hook(in the destructuring it’s called formMethods).

The problem is, if i add any comment on one screen and go to another screen, the comment field data stays the same even if i have different name prop value on TextAreaInput. Also when i go another screen, form getValues() method returns me a new key-value pair together with the one when i was on previous screen and the new one key-value pair contains the same value as the one when i was on previous screen.

I would like to have the comment field to have unique values for every screen it’s used.

I’ll be gratefull if anybody could help with this thing.

CommonCheckPage component

const CommonCheckPage: React.FC = () => {
  const { formMethods, checkOptions } = useCheck();

  <FormContext {...formMethods} >
    <form className={styles.form}>
      {checkOptions.comment && <CommentTextAreaInput {...checkOptions.comment} />}
    </form>
  </FormContext>
}

useCheck hook

export function useCheckStep() {
  const { state } = useLocation();
  const checkConfig: CheckConfiguration = get(state, 'configuration');
  const currentCheck = useSelector(getCheckByName(checkConfig.name));
  const currentCheckData = get(currentCheck, 'data') || {};

  const checkForm = useForm({
    mode: 'onChange',
    reValidateMode: 'onChange',
    defaultValues: currentCheckData,
  });

  return { checkForm, currentCheckData: currentCheck.data };
}

CommentTextAreaInput component

const CommentTextAreaInput = props => {
  const { name, value } = props;
  const { t } = useTranslation(i18n_namespace);
  const { watch, triggerValidation } = useFormContext();
  const formValue = watch(name);
  const computeDefaultValue = (!formValue && value) || '';

  useEffect(() => {
    triggerValidation([name]);
  }, []);

  return (
    <ContentArea className={styles.contentArea}>
      <TextAreaInput
        name={name}
        className={styles.textarea}}
        maxLength={MAX_TEXTAREA_LENGTH_CHARACTERS}
        validation={{
          maxLength: {
            value: MAX_TEXTAREA_LENGTH_CHARACTERS,
            message: t('validation.maxLength.message'),
          },
        }}
        noResizable
        defaultValue={computeDefaultValue}
      />
    </ContentArea>
  );
};