Submit with multi level components doesn't work

[italoiz]

First of all, thank you to the creator, a sensational library. 🙂

It is quite common when we have large form with multiple sections (fieldset), to separate the sections into different components, but for some reason the library does not work with nested components. Example:

// App.jsx
function App() {
  function handleSubmit(data) {
    console.log(data);
  }

  return (
    <Form onSubmit={handleSubmit}>
      <fieldset name="section1">
        <input name="field1" type="text" placeholder="field1" />
      </fieldset>

      <Section2 />

      <button type="submit">submit</button>
    </Form>
  )
}

// Section2.jsx
export default function SectionFields() {
  return (
    <fieldset name="section2">
      <input name="field2" type="text" placeholder="field2" />
    </fieldset>
  )
}

StackBlitz Code

I expected to receive something like:

{
  "section1": {
    "field1": "1"
  },
  "section2": {
    "field2": "2"
  }
}

But I'm getting this:

Without section2 object.

{
  "section1": {
    "field1": "1"
  }
}

[derekstavis]

unfortunately this use case is not supported because of how react and this library works. you can, instead, call the function inline on the parent render function:

function App() {
  function handleSubmit(data) {
    console.log(data);
  }

  return (
    <Form onSubmit={handleSubmit}>
      <fieldset name="section1">
        <input name="field1" type="text" placeholder="field1" />
      </fieldset>

      {Section2()}

      <button type="submit">submit</button>
    </Form>
  )
}