Building a Simple Registration Form in React with State Management

Let’s build a simple registration form using state management in React. This form will capture a user's name, email, and password, and we’ll manage the form inputs with the useState hook.

Step-by-Step Implementation

1.   Create the Form Component: We'll create a RegistrationForm component.

2.   Define State Variables: Use useState to manage the values of the form inputs.

3.   Handle Input Changes: Update the state when the user types in the input fields.

4.   Handle Form Submission: Capture the form data and log it to the console when the form is submitted.

 

 

Follow below step-by-step procedure to build the complete working application.

 

Step 1: Go to the post (Quickly Set Up a React Project with Vite: A Step-by-Step), and set up a React Project ‘user-registration’.

 

Project structure looks like below.

 

Step 2: Create components folder in src folder and define UserRegistration component.

 

UserRegistration.jsx

import { useState } from "react";

export default function UserRegistration() {
  const [myName, setUsername] = useState("");
  const [myEmail, setEmail] = useState("");
  let [disableRegistration, setDisableRegistration] = useState(true);

  function registerUser(event) {
    event.preventDefault();
    console.log(`User ${myName} registered successfully!!!!!`);
  }

  function handleNameChange(event) {
    setUsername(event.target.value);
    handleRegistraiton()
  }

  function handleEmailChange(event) {
    setEmail(event.target.value);
    handleRegistraiton()
  }

  
  function handleRegistraiton(){
    setDisableRegistration(!myName || !myEmail);
  }

  return (
    <form method="POST" onSubmit={registerUser}>
      <label forname="username">Enter Username : </label>
      <input
        type="text"
        id="username"
        value={myName}
        onChange={handleNameChange}
      />
      <br />
      <br />

      <label forname="email">Enter Email : </label>
      <input
        type="text"
        id="email"
        value={myEmail}
        onChange={handleEmailChange}
      />
      <br />
      <br />

      <button disabled={disableRegistration}>Register</button>
    </form>
  );
}

State Initialization

The UserRegistration component uses the useState hook to manage state for user input. Here’s how state is defined.

 

const [myName, setUsername] = useState(""); // State for the username

const [myEmail, setEmail] = useState(""); // State for the email

let [disableRegistration] = useState(true); // State for disabling the registration button

 

·      myName and myEmail: These variables hold the current values of the username and email input fields, respectively.

·      setUsername and setEmail: These functions are used to update the corresponding state variables.

·      disableRegistration: This variable indicates whether the registration button should be disabled based on whether the username and email fields are filled.

 

2. Event Handlers

The component defines two functions that handle changes in the input fields.

function handleNameChange(event) {
  setUsername(event.target.value); // Update the username state with the input value
 handleRegistraiton();
}

function handleEmailChange(event) {
  setEmail(event.target.value); // Update the email state with the input value
 handleRegistraiton();
}

 

·      handleNameChange: This function is called whenever the user types in the username field. It updates the myName state with the current input value.

·      handleEmailChange: Similar to handleNameChange, this function updates the myEmail state when the user types in the email field.

 

3. Disabling Registration Button

The code for managing the disable state of the registration button is.

function handleRegistraiton(){
    setDisableRegistration(!myName || !myEmail);
  }

This snippet checks whether myName or myEmail is empty. If either is empty, disableRegistration is set to true, disabling the button.

 

4. The form submission is handled by the registerUser function.

function registerUser(event) {
  event.preventDefault(); // Prevent default form submission behavior
  console.log(`User ${myName} registered successfully!!!!!`); // Log the username
}

5. Rendering the Form

The component renders a form with input fields for the username and email, along with a register button.

return (
  <form method="POST" onSubmit={registerUser}>
    <label forname="username">Enter Username : </label>
    <input
      type="text"
      id="username"
      value={myName}
      onChange={handleNameChange}
    />
    <br />
    <br />

    <label forname="email">Enter Email : </label>
    <input
      type="text"
      id="email"
      value={myEmail}
      onChange={handleEmailChange}
    />
    <br />
    <br />

    <button disabled={disableRegistration}>Register</button>
  </form>
);

The input fields use the value prop to bind their value to the corresponding state variables (myName and myEmail), ensuring that the UI reflects the current state. The button element has its disabled property set based on the disableRegistration variable.

 

Step 3: Update main.jsx like below.

 

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import UserRegistration from './components/UserRegistration'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <UserRegistration />
  </StrictMode>,
)

Step 4: Build and run the application by executing below commands.

  cd user-registration
  npm install
  npm run dev

Open the url ‘http://localhost:5173/’ in browser, you will see below screen.

 

‘Register’ button is enabled once you enter Some data to Username and Email.

 

Click on Register button, you can see below message in the console.

 

User Krishna registered successfully!!!!!

 

You can download this application from this link.

Previous                                                    Next                                                    Home