fascinating-indigo

does the name is fixed to "form"?..

trying this

  const form1 = useForm({
    ...
  })

  const form2 = useForm({
    ...
  })
  
  return <>
      <form1>
        ... 
      </form1>
      <form2>
       ... 
      </form2>
      </>

  const form1 = useForm({
    ...
  })

  const form2 = useForm({
    ...
  })
  
  return <>
      <form1>
        ... 
      </form1>
      <form2>
       ... 
      </form2>
      </>

will give this TS error:

Property 'form1' does not exist on type 'JSX.IntrinsicElements'. (ts 2339)

Property 'form1' does not exist on type 'JSX.IntrinsicElements'. (ts 2339)

Am I missing something, or we cannot use two separate forms in one component?? Because that what I think I need. I have two tabs: "draft" and "published". The content is really similar, but the validation logic and submit actions are different, so I wanted to define just two useForm hooks, but apparently I can't...

5 Replies

metropolitan-bronze•2w ago

<form> is a native jsx element it‘s unrelated to the hook‘s variable name

metropolitan-bronze•2w ago

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form

MDN Web Docs

<form>: The Form element - HTML | MDN

The <form> HTML element represents a document section containing interactive controls for submitting information.

metropolitan-bronze•2w ago

I‘ll try and answer your other post when I get back from work 👍 hopefully this helps until then

fascinating-indigoOP•2w ago

Thank you 🙏 but what to do in case if I want to use two different forms with different default values and onSubmit's ? Of course I could separate each form in its own component, but that would mean duplicating a lot of code...

metropolitan-bronze•2w ago

field groups can help share common fields but if that includes most values, consider using onSubmitMeta and checking which type it was there

Gaming

Programming

does the name is fixed to "form"?..

Did you find this page helpful?