How to Develop User Registration Form in ReactJS ?
Form is usually defined inside the <form> tag in conventional HTML code and also in ReactJS. It can have the usual form submission behavior that can take to a new page but that will not make use of react full potential, instead, as we all know it is done using react components.
Approach: As we all know React is famous for the components and hooks and its reusability, we are going to use the component to create a form. This form component just like an ordinary HTML form can have labels, input fields, text area, radio button, check box, etc. On top of that, it can also have different attributes with little modification i.e. “for” attribute is replaced by “htmlfor”, “class” is replaced by “className”. It still can have some of the old practices such as “value” property is still there.
As we are having the strength of React, we will handle the form by creating different methods for that i.e. to handle the change in any field of the form there will be a method when submit button is clicked there will be a method for it, likewise.
Using useState with the form data: Every component can have its own states, these states can be updated using the hook useState and the effect will be reflected through the component.
Here, the “name” has been given to be the state variable and it has an initial value as “GFG”. We have also given the property onChange which is used to specify the method that should be executed whenever the value of that input field is changed, we have set it to the handleChange, which is yet to define as shown below.
Example: Now, let us extend our understanding of useState hook by creating the user form, which will take name, email, and password as the input. It will have one submit button to handle the submission. We will also validate the fields, if either of the fields is empty we will show an error message if not we will show a success message to the user.
Create React Application: Create a React application using the following command.
npx create-react-app yourappname
Project Directory: Then in your “src” folder erase the content of App.css and App.js files and also create one more file named Form.js, finally, your project structure will look like this.
Filename: App.css This file contains all the CSS that we need for this example which is not only self-explanatory but also out of the scope of this article. Although it is given here for your reference.
Filename: App.js This App.js is the file, which is being rendered by React by default in the index.js file, we will not touch that index.js file, instead all our components which we make will be rendered inside this App.js as shown below.
Filename: Form.js This file has all the necessary components, functions for our form. First of all, we have imported useState from the react. then we have exported the form component which is having all the states and methods.
We have defined states for name, email, and password for holding form data. We also have some other states such as submitted and error for the functionality of the form. Then, we have defined the handleName, handleEmail, handlePassword methods which are used to update the states.
After that, we are having a method for handling the submission of the form. It is checking if either of the fields is empty it set errors to true, otherwise, it sets success to true. Then we have defined a success message, which is only displayed if the success is set to true. Then we have an error message which is only displayed if an error is set to true.
Then we are returning the component, first of all, we have an h1 to hold the heading of the form. Then we have one division to hold the successMessage() and errorMessage(). And at last, the division which holds the form. It has usual labels and input fields. The onChange to give their respective methods and their value to associate them with the states.
Note: The states can only be updated using set methods as shown in the methods.
Run the application using the following command: