alan2207 / bulletproof-react

🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to use react-hook-form's setValue etc

yyykkkyyy opened this issue · comments

Hi ! I'm learning from this wonderful repository.

I would like to ask that can I use react-hook-form's setValue etc.

In this repo's Form structure, how to use setValue etc from other components.

I think that this repo's form structure offers really reusable error handling and labeling.
On the other hand, I don't find appropriate way to set values dynamically on this form structure.
I envision a form that automatically populates the next form with values based on the input values.

For instance, I tried the code like below:

<Form<UserValues typeof schema>
  ...
 >
    {({ formState, control, setValue, watch }) => (
       ....
    )}
</Form>

And below is my sample input field.

import { Controller, UseFormRegisterReturn } from 'react-hook-form';
import TextField from '@mui/material/TextField';

import { FieldWrapper, FieldWrapperPassThroughProps } from './FieldWrapper';

type InputFieldProps = FieldWrapperPassThroughProps & {
  type?: 'text' | 'email' | 'password';
  onChange?: any;
  defaultValue?: string;
  control: any;
  setValue?: any;
  name: string;
};

export const InputField = (props: InputFieldProps) => {
  const { type = 'text', label, onChange, defaultValue, control, setValue, name, error } = props;

  return (
      <FieldWrapper label={label} error={error}>
        <Controller
          name={name}
          control={control}
          defaultValue={defaultValue}
          render={({ field, fieldState, formState }) => {
            return (
              <TextField
                label={label}
                type={type}
                value={field.value}
                ref={field.ref}
                onChange={onChange}
              />
            );
          }}
        />
      </FieldWrapper>
    );
  };

I use MUI for input components, so I use a control variable and it is used for Controller in the component.
I can get setValue, watch and something, but I don't understand how to use these variables.

I understand this is very general and not critical question.

I would really appreciate it if you could answer my question.

Thanks.