-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Multiple Forms on the same page #1367
Comments
Realizing my custom animations were leading the input fields to appear on top of each other and lead to this confusing behavior. Closing issue. |
@tylergaugler16 rules of form never nest them |
Came here from a google. I had two forms toggled by state on the same page. Giving them different |
@philals Is there any documentation regard the |
@mateja176 Hi really sorry I tried looking for the code to remind myself - I even looked at my commits for that day... I think I was referring to React's standard key prop. https://reactjs.org/docs/lists-and-keys.html I have a feeling adding this to the Formik component allows it to have two forms on the same page. If anyone is able to confirm my memory that would be great. |
I'd be inclined to agree if the prop types of |
You can submit your information on onClick from your submit button. onClick = {() => console.log (values)} |
Thanks, it helped! I'm able to have two different Formik components on the same page by adding key property. But, I'm curious whether this is a correct approach or not. Can someone fill me on how it works by adding key property? |
The new react hook useId() might help for keys. |
How to prevent strange behavior when having two formik components on the same page❓
I have a login and signup form on the same page. Both forms work totally fine in isolation. The main structure I have is this:
And this is an example of how one of my forms looks:
What's happening is that my signup form works fine, but for my login form none of the inputs work. And when i use the react inspector, I notice that the signup fields are inside my Login component (when in my actual component they are not).
When i do
display: none
on my signup form, the login form behaves normal btw.I've tried using keys on both forms to keep them distinct, but that hasnt worked. Any ideas?
The text was updated successfully, but these errors were encountered: