How to Develop User Registration Form in React JS ?
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.
Prerequisites:
Approach:
To Develop a User Registration Form in React JS, we will use the HTML form and input tags to get the user input. Store these values with the onChange method in the useState Hook variables. Add the validations for input fields when the form is submitted using the Submit button. Style the Registration form using CSS classes and properties.
handleChange = () => {
function logic ....
};
.
.
.
<form>
<input value={name} onChange={handleChange}/>
</form>
Steps to create the React application:
Step 1: Create React Project
npm create-react-app myreactapp
Step 2: Change your directory and enter your main folder.
cd myreactapp
Project Structure:
Example: This example demonstrates a simple registration form with name, email and password input fields using HTML Form and HTML Input and manipulate the state using useState Hook.
Javascript
// Filename - App.js './App.css' ; import Form from "./Form" function App() { return ( <div className= "App" > <Form /> </div> ); } export default App; |
Javascript
// Filename - Form.js import { useState } from "react" ; export default function Form() { // States for registration const [name, setName] = useState( "" ); const [email, setEmail] = useState( "" ); const [password, setPassword] = useState( "" ); // States for checking the errors const [submitted, setSubmitted] = useState( false ); const [error, setError] = useState( false ); // Handling the name change const handleName = (e) => { setName(e.target.value); setSubmitted( false ); }; // Handling the email change const handleEmail = (e) => { setEmail(e.target.value); setSubmitted( false ); }; // Handling the password change const handlePassword = (e) => { setPassword(e.target.value); setSubmitted( false ); }; // Handling the form submission const handleSubmit = (e) => { e.preventDefault(); if (name === "" || email === "" || password === "" ) { setError( true ); } else { setSubmitted( true ); setError( false ); } }; // Showing success message const successMessage = () => { return ( <div className= "success" style={{ display: submitted ? "" : "none" , }} > <h1>User {name} successfully registered!!</h1> </div> ); }; // Showing error message if error is true const errorMessage = () => { return ( <div className= "error" style={{ display: error ? "" : "none" , }} > <h1>Please enter all the fields</h1> </div> ); }; return ( <div className= "form" > <div> <h1>User Registration</h1> </div> { /* Calling to the methods */ } <div className= "messages" > {errorMessage()} {successMessage()} </div> <form> { /* Labels and inputs for form data */ } <label className= "label" >Name</label> <input onChange={handleName} className= "input" value={name} type= "text" /> <label className= "label" >Email</label> <input onChange={handleEmail} className= "input" value={email} type= "email" /> <label className= "label" >Password</label> <input onChange={handlePassword} className= "input" value={password} type= "password" /> <button onClick={handleSubmit} className= "btn" type= "submit" > Submit </button> </form> </div> ); } |
CSS
/* Filename: App.css */ .App { text-align : center ; background-color : green ; } .label { display : block ; font-size : larger ; color : white ; padding : 5px ; } .input { font-size : larger ; padding : 5px ; margin : 2px ; } .btn { color : white ; background-color : red ; border-radius: 5px ; font-size : larger ; display : block ; padding : 5px ; margin : 10px auto ; } .messages { display : flex; justify- content : center ; } .error { display : block ; background-color : red ; color : white ; width : fit-content; height : 50px ; padding : 5px ; } .success { display : block ; background-color : lightblue; color : black ; width : fit-content; height : 50px ; padding : 5px ; } |
Steps to Run the Applicaiton: Run the application using the following command:
npm start
Output: This output is visible on the http://localhost:3000/ on the browser window.
Contact Us