React Hook Form Controller

Question

I am using react hook form controller on material UI textField component where the type i am giving as file.

<Controller
            name={name}
            control={control}
            render={({ field: { value, onChange } }) => (
              <ReactHookFormSelector
                selector={selector}
                type={type}
                multiline={multiline}
                value={value}
                onChange={(event) => {
                        console.log(event.target.files)
                        onChange(event.target.files)
                      }
                }
              />

Here i want to store this file and value in the redux store state while submitting this form

And i want to use that file and value later in another Textfield(input=file) component.

Can anybody help me how i can store this file and value in redux and use it later?

Answer 1

If you use react-hooks-form, you can use setValue to the file .

and then use watch or getValues() functions from the react-hooks-form to access the state in another component.

      onChange={(event) => {
        console.log(event.target.files)
         setValue("files",event.target.files[0].name)
         }
       }

then use watch :

const filesWatch = getValues("files")

More in here : https://react-hook-form.com/api/useform