Next.js Discord

Discord Forum

Warning: validateDOMNesting (...) <form> cannot appear as a descendant of <form>

Answered
Sun bear posted this in #help-forum
Open in Discord
Avatar
Sun bearOP
How can I fix this warning ? It appears when I load my signup page:
import { getDictionary } from '@/app/translation/dictionary';
import SignUp from '@/components/SignUpProcess/page';

// Define the type for props
type Props = {
  params: {
    lang: "en" | "ro";
  }
}

const Page = async (props: Props) => {
    const data = await getDictionary(props.params.lang);
    return (
        <>
            <SignUp dictionary={data} />
        </>
    );
}

export default Page;
Image
Answered by Asian black bear
You'd have to inspect your component hierarchy to understand where this is coming from.
View full answer

16 Replies

Avatar
Asian black bear
It's pretty self-explanatory. Your DOM has a form inside a form on that particular page which is not valid.
Avatar
Asian black bear
You'd have to inspect your component hierarchy to understand where this is coming from.
Answer
Avatar
Asian black bear
You can find it from the callstack
Image
Avatar
Sun bearOP
Hmm, I'm not sure which one of the forms is causing that.
Image
Avatar
Asian black bear
The inner one. Because a form is not allowed to be inside another form.
Avatar
Sun bearOP
So I should remove the form inside this component I suppose right ?
Image
After removal the error disappears and so does the white background around the signup form.
Image
Image
I wonder if this is correct now.
Avatar
Asian black bear
If the error is gone, then the nesting is correct now.
That you have a styling problem now is something different and probably an issue with nesting of your containers that you can fix by simplifying them and rewriting the components.
Avatar
Sun bearOP
That's great cause I didn't want that white background around the form anyway 😄 I had no idea that's where it was coming from.
You mean now I have another issue ?
Avatar
Asian black bear
No I thought you expected it to stay white.
Anyways if all's well now it's fine.
Avatar
Sun bearOP
Oh no no no, I didn't want that in the first place and had no idea where it was coming from 😄
Thank you very much for your help Near! 🙏 I hope you're having a great day!