In my case this is occur bcoz of i declared <form> inside another <form/> tag.


You can portal a form like this:

import Portal from '@material-ui/core/Portal';

const FooComponent = (props) => {
   const portalRef = useRef(null);

   return <>
        First form
        <div ref={portalRef} />
      <Portal container={portalRef.current}>
        <form>Another form here</form>

In the example above I use the react material-ui Portal component. But you can try to implement it with React Portals as well


I faced this issue when using ant design table and turns out its not ant design which throws the warning. It's the web standards description

"Every form must be enclosed within a FORM element. There can be several forms in a single document, but the FORM element can't be nested."

So, there should not be a form tag inside a form tag.

To solve the issue (in our case), remove the Form tag inside the DynamicFieldSet "return" and replace with a div tag

Hope it helps :)

Related Query

More Query from same tag