Using forms in React

Conventionally, forms are used to collect user inputs. There is no serious production-grade web application without forms. Using forms in React is slightly different from using HTML form elements. If you have developed React applications for a while, this might not be new to you.

The subtle difference between the elements of React forms and those of normal HTML forms is due to the unique way React handles the internal state of forms. The HTML DOM manages the internal states of native HTML form elements in a browser DOM way. On the other hand, React handles form elements through its components’ state.

So, what is this state all about? The state we are talking about is an object that holds user inputs before form submission. Form elements have an internal state that prevents data loss before you submit user input across the processing channel.

Having laid down the background for the internal state management of form elements, let’s quickly...