How to Develop User Registration Form in ReactJS ?
The 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 it to a new page but that will not make use of React’s full potential, instead, as we all know it is done using react components.
Approach: React is renowned for its reusable components and powerful hooks, making it an excellent choice for building forms. Just like a traditional HTML form, a form component in React can include labels, input fields, text areas, radio buttons, checkboxes, and more. With slight modifications, we can use familiar attributes such as “for” (replaced by “htmlFor”) and “class” (replaced by “className”). Additionally, React maintains the use of the “value” property.
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 the useState hook by creating the user form, which will take the name, email, and password as 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 that we make will be rendered inside this App.js as shown below.
Filename: Form.js This file has all the necessary components, and functions for our form. First of all, we have imported useState from the react. then we 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, and 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:
Please Login to comment...