In this article, we’ll discuss how to design/ build a perfect react form by applying best practices from software development. So that you can keep your application more organized and clean.
In this tutorial you’ll build a form in react application with an example app that store details of employees in a company. we’ve included commonly used controls to give you an idea on how to apply discussed concepts in real a application. In a practical application most of you must be using an UI react framework. So in this tutorial I will be using popular React UI framework – Material UI. Don’t worry you could follow same steps for other UI frameworks also or even if you are work with plain HTML.
GitHub Repository : http://bit.ly/3p1khFa
Keep it DRY
DRY stands for “Don’t Repeat Yourself”. It is a software development principle aimed at reducing repetition of software patterns.
“Every piece of knowledge must have a single, unambiguous, authoritative representation within a system”The Pragmatic Programmer – Book
This concept is more important in case forms in an application because, in forms across the application, we repeatedly use common controls like input, button, select, checkbox, etc. Whether you use React UI Frameworks or not, form controls across the entire application will be designed with a unique style. If we were able to create a single re-usable component for each form control we could avoid writing the same code again and again.
Architect Form and its Control
Hope you’ve created a brand new react app with
create-react-app . The structure of the application would be as follows.
* src | |--+components | |--+controls | |--+pages
there are 3 folders, inside
controls folder, we create components for form controls and rest of the reusable components will be there in
pages contains components for each page/ route in this application.
The above architecture of the app will provide necessary abstraction in page components. Meaning without knowing how these controls are designed or how it works, you could use them like a normal HTML form controls.
Let’s look them in action. Rest of the advantages of above structure can be discussed later.
First of all, let’s create components for commonly used 7 form controls. All of the control components are created with in
This component renders a textbox, into it you could pass following properties.
name– this property is used to name the control to uniquely identify the control.
value– value inside the control is assigned through this property.
label– label text to be shown along with the control.
onChange– a function to be called when there is a change of value inside the control.
other– if you’ve passed extra properties. It is retrieved through this property with the help of separator operator.
Above properties are common to all input controls. rest of the properties are
variant– an attribute from materil UI, to style the textbox. If there is no value passed for this property default value
'outlined'will be used.
In a page component we’ll be using the
Input component as follows
Here you could see the benefit of
other object in our component. there is no
type property in
Input component. even though it will be applied through
variant– material UI style for the button, by default it is
color– material UI color, the default value is
text– text to be shown inside the button
onClick– function to handle the button click event
There is no extra property here. But there is an function
convertToDefEventPara we could discuss that later.
With this component, we’ve to show a list of radio buttons. Along with other properties, an array of entities must be passed with
items property corresponding to each radio button and the list of radio button is rendered while looping through the array.
RadioGroup, options of the select control are rendered from
Apart from material UI, for date picker we’ve to install following packages.
- Material UI Pickers –
npm i @material-ui/pickers
npm i @email@example.com date-fns
As mentioned before,
convertToDefEventPara function can be discussed later.
Design the Form with React Hook
When it comes to building form in react, there lot of things common to all forms. like
- react state management for the controls in it
- function to handle
- form reset operation
- form design style
- error validation
as per the DRY principle, we are going to create a react hook and a
Form component which can re-used for creating forms inside your application. That we can do inside
Don’t worry I’ll explain everything, inside this file we’ve a custom react hook –
useForm and a
– it expect a model object(
modelObject) containing properties for all form controls with default values in it.
modelObject, we’ve created a state object
values, later in page components it will used for storing current values in form controls.
handleInputChangefunction can handle form control
the function expect a parameter object
valueof the control from which
onChangeevent is triggered. Incase of controls like textbox or select we could directly pass the default event parameter to this
eparameter. which has same properties as mentioned above. But for some controls like checkbox and datepicker we’ve to create a new object with above properties from their default event parameter. that’s what we’ve done in
resetFormfunction can handle form reset operation.
Finally it returns all the state object with their ‘set’ functions and other event handling function back to the caller.
The component returns a normal HTML form with some predefined styles applied.
classesobject we’ve set the width and margin for inner form controls. This is a material UI way of customizing components, you should replace it accordance with your UI framework. once you define style or behavior(
autoComplete) of the form here, you could re-use the same in rest of the components.
onSubmit: function to handle form submit event.
childrenit is a reserved property in react to refer components added in between
for eg: In following case,
Selectcomponents will be there in
Let’s put Everything Together
Let build a form in react with all the component that we’ve created so far. We’ve created an
Employee component in
First of all let’s look how to import form control components into
Instead of Importing each component on separate line, I’ve an idea. Let’s create an
index.js file in
This new file will export all control component all together. now you could import them with single line
Now let’s complete
modelObject, we’ve properties corresponding to all form controls with their default values. which is passed to
useForm hook, from that we’ve retrieved state object
values and it’s set function and rest of the event handling functions.
departmentList are used in gender radiogroup and department select control respectively.
Form submit event is handled within
handleSubmit function. Now the form should looks like this.
In our YouTube channel, we’ve covered the same topic you could watch the same from here.