Issues with form when making inputs individual components; how to make reusable components?

[kintz09]

Could anyone help me figure out what I'm doing wrong with my form?

Code Sandbox

For some reason, only 1 of the 3 default values is being filled by the form. When the form initializes, the getValues() does show all 3 values, but as soon as I touch the one filled input, the other two disappear.

I'm making a new form for my app and I'm trying to make my code more reusable. In this example, I'm trying to make each input field its own component. Is this just not compatible with react-hook-form? If not, what's the best approach to make my input fields more reusable?

NOTE: My project is a tad old, but you can see the versions of the modules in the code sandbox.

[bluebill1049]

getValues:

An optimized helper for reading form values. The difference between watch and getValues is that getValues will not trigger re-renders or subscribe to input changes.

Important: You shouldn't use this method inside render. This is suitable for reading values in an event handler.

If you want to subscribe to each input change, use watch.

Your approach looks fine. :)

[kintz09]

@bluebill1049 Thanks! If my approach is okay, can you explain why the default values aren't getting set for all 3 inputs?

FWIW, I'm not actually using getValues in my real code, I just added that to help me debug the issue.

[bluebill1049]

because your input's ref is not registered:

 register({
          required: validationErrMsg.required,
          maxLength: {
            value: inputMaxLength,
            message: validationErrMsg.maxLength
          },
          pattern: {
            value: inputPattern,
            message: validationErrMsg.pattern
          }
        })(e);

I would use useController or Controller for Controlled input tho.

[kintz09]

Blast! Ah, I wasn't passing e during the register function on the other two inputs. 🤦 Thank you so much for helping me with this!