Warning: validateDOMNesting (...) <form> cannot appear as a descendant of <form>
Answered
Sun bear posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
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](https://cdn.discordapp.com/attachments/1191495559928893601/1191495560688050237/Screenshot_at_Jan_01_23-36-16.png?ex=65a5a5b6&is=659330b6&hm=cb570359a1e49d3ecb22abf3df018c7f188436f1f0962b0016b18eb6517bebec&)
Answered by Asian black bear
You'd have to inspect your component hierarchy to understand where this is coming from.
16 Replies
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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](https://cdn.discordapp.com/embed/avatars/0.png)
Asian black bear
You'd have to inspect your component hierarchy to understand where this is coming from.
Answer
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Asian black bear
You can find it from the callstack
![Image](https://cdn.discordapp.com/attachments/1191495559928893601/1191503290295398420/image.png?ex=65a5ace9&is=659337e9&hm=465d0df9ea62cf2caf872745fbade71828a63a4078312ab9545f124db313c499&)
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Sun bearOP
Hmm, I'm not sure which one of the forms is causing that.
![Image](https://cdn.discordapp.com/attachments/1191495559928893601/1191504353845051423/Screenshot_at_Jan_02_00-12-24.png?ex=65a5ade7&is=659338e7&hm=341eb0be174e2fac2a4bcd1056f4cac384ee39645d5562907d845880704edae8&)
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Asian black bear
The inner one. Because a form is not allowed to be inside another form.
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Sun bearOP
So I should remove the form inside this component I suppose right ?
![Image](https://cdn.discordapp.com/attachments/1191495559928893601/1191505395051667506/Screenshot_at_Jan_02_00-16-41.png?ex=65a5aedf&is=659339df&hm=b552f0666bfe005f77dd075a0d307634bc8d0a089dad3543629e6394d5908322&)
After removal the error disappears and so does the white background around the signup form.
![Image](https://cdn.discordapp.com/attachments/1191495559928893601/1191505644436607027/Screenshot_at_Jan_02_00-17-38.png?ex=65a5af1a&is=65933a1a&hm=4c8c519215bac0713f57910ca4d52bfa21c8f936a0c2376a9384190201716f74&)
![Image](https://cdn.discordapp.com/attachments/1191495559928893601/1191505644914741419/Screenshot_at_Jan_02_00-17-22.png?ex=65a5af1a&is=65933a1a&hm=8a6c92e82d2e530353ce1907d9930fa037bb2f3e1d5bdc4e5b5987d8d9f3db7a&)
I wonder if this is correct now.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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](https://cdn.discordapp.com/embed/avatars/5.png)
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](https://cdn.discordapp.com/embed/avatars/0.png)
Asian black bear
No I thought you expected it to stay white.
Anyways if all's well now it's fine.
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
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!