DEV Community

A Better Guide To Forms in React

Andrew Jones on October 11, 2023

The React ecosystem is lush with libraries, articles, videos, and more resources for every web development topic you could imagine. However, over t...

Read full post

Jonathan Gamble • Oct 11 '23

Or even better, use TypeScript, and use Object.fromEntries:

const handleSubmit = (event: FormEvent<YourType>) => {
  const formData = new FormData(e.target)
  const { name, email, address } = Object.fromEntries(formData);
  ...
};

Andrew Jones • Oct 11 '23

Great addition! Thank you! 🙏

Kelly Copley • Oct 12 '23

When using React, I've not found a use case yet that React Hook Form didn't satisfy and make my life 1000x simpler

Justin Trenary • Oct 14 '23

You've swayed me away from using controlled fields with state for form data, completely agreed with your rationale for using uncontrolled inputs where possible:

avoiding boilerplate-y code
favoring the more "web-idiomatic" approach
better performance through shipping less js with server-side rendering

This is my first time hearing of the FormData API, I'll definitely be using that going forward!

Would love to read a follow up where you discuss more about how React-Hook-Form fits into the picture. Great article dude, thanks for taking the time to write it

Rawdyn Nutting • Feb 12

I nearly didn't read this article thinking I knew enough about forms. 😏

I'm very glad I did. Really great perspective and will definitely make me revisit how I implement forms in future projects.

More broadly, really well written article. 👍
Perfect balance of being concise and providing detail.

manuqs33 • Feb 11 • Edited

Excellent article, it helped me a lot. In my job we created dozens of controlled forms, and it was cumbersome and hard at moments, with a lot of bug potential. I didn't use uncontrolled because I didn't know about new FormData(). The way you manage uncontrolled forms is definitely the way, managing controlled inputs only when needed

Ko • Oct 12 '23 • Edited

I use class components because instances of such components exist. Each form consists of forms, forms of forms, ... and so on. Each form has a public method get() {return {dataA: refs.formA.get(), dataB: refs.formB.get(), dataC: ":)"}} that will return form data that was collected from child forms by calling get().

This simple solution allows me to create very large and complex shapes. Unfortunately, this approach is not possible on functional components

Joshua • Mar 6

I really like this approach. The question is, how do you handle more complex forms with nested data in arrays? Something like:
{ name: "James", hobbies: [{name: "football"...}, {name....}]}

Andrés Da Viá • Oct 16 '23

Besides FormData we can also make use of the form submit event and access input elements like => event.target.elements.[inputID] or event.target.elements.[inputName]