search

kaliberjs / forms

Forms for React
MIT License
4 stars 0 forks source link

Duplicate form id's when using multiple forms on same page (PHP) #12

Closed daveykropf closed 4 years ago

daveykropf commented 4 years ago

When using two or more forms on the same page in PHP, I'm getting the following message:

Warning: Prop `id` did not match. Server: "form1.email" Client: "form2.email"
    in input (created by FormFieldText)
    in div (created by FormFieldText)
    in FormFieldText (created by EmailForm)
    in form (created by EmailForm)
    in EmailForm (created by NewsletterFormApp)
    in div (created by NewsletterFormApp)
    in NewsletterFormApp

[DOM] Found 2 elements with non-unique id #form1.email:
EECOLOR commented 4 years ago

Note to self: this problem is caused by the fact that client-side forms uses global state to determine the form id. This ensures that multiple forms on the same page never use the same id's.

However if multiple forms are rendered in isolation the rendered forms use the same count.

The only way to solve this problem is to allow the form id to be set from the outside. This way, the PHP code that knows multiple forms are rendered on the same page can assign unique ids.

EECOLOR commented 4 years ago

It is now possible to set the formId: https://github.com/kaliberjs/forms/commit/dd59d080af95b865459e66756f53e0ba0a0620aa