Better Form Management – Robbie Dela Victoria – Medium

Better Form Management  #javascript #react #reactjs

  • Better Form ManagementBuilding complex forms in react.js is notoriously hard, there are a lot of moving parts.
  • Don’t forget A/B testing, if you’re into that sort of thing.After rebuilding the form below a few times, I’ve come up with a few general tips to help manage the complexity of forms.
  • The goal of this series of articles is to help guide you through the process of creating a better form.

Building complex forms in react.js is notoriously hard, there are a lot of moving parts. Not only do you have to manage the state of the each input (values), you have to manage the validation and…

@ReactDOM: Better Form Management #javascript #react #reactjs

Building complex forms in react.js is notoriously hard, there are a lot of moving parts. Not only do you have to manage the state of the each input (values), you have to manage the validation and visual states along with business logic. Don’t forget A/B testing, if you’re into that sort of thing.

After rebuilding the form below a few times, I’ve come up with a few general tips to help manage the complexity of forms. The goal of this series of articles is to help guide you through the process of creating a better form.

One of the sources of complexity is the input field. Most examples of forms online will in the container of the of the form. Run the code on codepen.io

There are a couple of challenges with this type of architecture.

For the sake of this article and to avoid confusion, I’m going to call this better component a ‘self-controlled input’ component.

The self-controlled input is basically a wrapper of the component in order to manage it’s own state value. Run the code on codepen.io

Bonus: If you use recompose, check out my code sample on codepen.io.

Better Form Management – Robbie Dela Victoria – Medium