Warning: validateDOMNesting (...) <form> cannot appear as a descendant of <form>
Answered
Sun bear posted this in #help-forum
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;
Answered by Asian black bear
You'd have to inspect your component hierarchy to understand where this is coming from.
16 Replies
Asian black bear
It's pretty self-explanatory. Your DOM has a form inside a form on that particular page which is not valid.
Asian black bear
You'd have to inspect your component hierarchy to understand where this is coming from.
Answer
Asian black bear
You can find it from the callstack
Sun bearOP
Hmm, I'm not sure which one of the forms is causing that.
Asian black bear
The inner one. Because a form is not allowed to be inside another form.
Sun bearOP
So I should remove the form inside this component I suppose right ?
After removal the error disappears and so does the white background around the signup form.
I wonder if this is correct now.
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.
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 ?
Asian black bear
No I thought you expected it to stay white.
Anyways if all's well now it's fine.
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!