Search code examples
javascriptreactjsformsreact-hook-form

React Hook Form - Smart Components - form broken when Inputs are wrapped in an element

Following the tutorial - https://www.react-hook-form.com/advanced-usage#SmartFormComponent) - works until the inputs are wrapped in an element. What changes would one need to make to the Form component to make this work?

<Form onSubmit={(data) => setData(data)}>
    {/* wrapping the inputs breaks the form */}
    <div>
        <Input name="firstName" />
        <Input name="lastName" />
    </div>

    <button>Submit</button>
</Form>

A hacky way out of this problem would be to create something like:

const InputWithDiv = props => (
  <div>
    <Input {...props} />
  </div>
)

ref: https://stackoverflow.com/a/66215997/2102042

but this isn't a solution

👀 👉 example: https://codesandbox.io/s/react-hook-form-smart-form-component-forked-8o0f9?file=/src/index.js

Solution

  • I think you have to use FormContext here. There is also this discussion answered by the author of the library which recommends using FormContext for a scenario where your inputs are deeply nested. For example when using a <fieldset /> or a fragment or as in your case a <div />.

    Edit React Hook Form - Smart Form Component (forked)

    Here is the relevant section from the docs.