Recursive auto register example using createElement

[dariuszp]

Hi,
I hate doing forms in React. It's just too much work. So when I saw this library and extensive and nice documentation I was inspired. Until now I was using either formik or redux-forms. So after extensive testing I think I will give this library a chance. Especially since unlike formik it handles dynamic fields better.

I saw example of registering fields using createElement to inject props. And I was thinking... it's not very practical. Usually we don't build forms like that:

<form>
  <input name="name" />
  <input type="submit" />
</form>

We build them like this:

<form>
  <div>
    <label>Name</label>
    <input name="name" />
  </div>
  <div>
    <input type="submit" />
  </div>
</form>

So when you present this example:
https://codesandbox.io/s/react-hook-form-smart-form-component-eqb3n?file=/src/index.js

It will stop working the moment you put input into div for styling or some other weird reasons.

So I'm thinking... how about something like that?

https://codesandbox.io/s/react-hook-form-smart-form-component-ke3vb?file=/src/index.js

At least you don't have to worry about component structure inside form. This could be extended to add error messages and other stuff if required.

[bluebill1049]

For those inputs that doesn't sit at the root, you can use: https://react-hook-form.com/advanced-usage#ConnectForm