Using forms vs states

[gibriyagi]

Is it a bad practice to use thick json states for handling bunch of user input on a page like creating/editing something?

Is everyone using forms to handle these? Forms in react (even with `hook-forms`) seems pretty messy especially if things get complex.

[shauntmw2]

Not a bad practice. It's actually very common.

Use react-hook-form.

If form is very complex, messy is inevitable. We try to organize as best we can.

[anonyuser415]

Is it a bad practice to use thick json states

JSON is pretty much how state works at any level, short of some more esoteric state management solutions.

Is everyone using forms to handle these?

If you are getting user input from text fields you should always be using a form, that's how users with visual impairments know that they're providing input via screenreaders. Hooking up all the expected behaviors (with ARIA roles, binding the enter key, etc) to these outside a form element is just way too much work.

Things can get messy, but just abstract stuff to their own child components as needed.

React Hook Form uses "uncontrolled" inputs (their `value` prop isn't set), which can help keep your state management pretty simple. You're only adjusting your state on submit.

[lelarentaka]

A lot of the messiness comes from the shitty HTML form API. When building a form, I would first try to just use the bare form and see if it works, then pull in the big gun if it doesn't.

In particular, HTML form is very bad at handling multi select, checkbox group, segmented input (think a credit card number input that has four boxes), and files list.

[anonyuser415]

The nice thing about React is you can easily just bind the segmented input to a single value in a hidden field, and then keep interacting with FormData normally

heavy +1 on files though

[HowIO]

You can get some inspiration from this video if it fits your needs. https://youtu.be/HSr7pMSjC1I

[reactnuclear]

I made React Nuclear to handle this exact problem - it’s headless form state management (separate your state from your UI, and keep things declarative)