How to create a registration form in ReactJS

With a Registration form, users can submit some information and register into an application, So as developers, It’s our responsibility to make it more user-friendly at the same time we have to take care of the backend, user data should be valid inputs.

In this article, we will learn how to create a registration form in ReactJS. Below are the steps that we will be following,

  • Creating the React project (we will use TailwindCSS to use styled component. Read this article to know more)
  • Adding form inputs
  • Listening to user inputs

Creating the React project

  • Run the below commands to create a new React project
npx create-reacat-app my-app
cd may-app
npm start

Read this article to more about creating a react project.

  • Open the App.js file which is located in the src folder of the project directory

import React, { useState, useEffect } from "react";
const App = () => {

  return (
    <div>

    </div>
  );
}

export default App
import React, { useState, useEffect } from "react";
const App = () => {

  return (
    <div>
      <h1 className="text-6xl text-center">Register form</h1>
    </div>
  );
}

export default App

Note: We are using TailwindCSS for styling.

Add form inputs

  • Create a form
import React, { useState, useEffect } from "react";
const App = () => {

  return (
    <div>
      <h1 className="text-6xl text-center">Register form</h1>
      <form>

      </form>
    </div>
  );
}

export default App

Here, we have created a form container and inside this, we will add some input fields.

  • Add some input fields inside the form.
<div className="my-8 ">
            <label className="text-xl mx-6">Name</label>
            <input type="text" placeholder="Type here" className="input bg-gray-300 input-bordered w-full max-w-xs" />
</div>
<div className="my-8">
            <label className="text-xl mx-6">Email</label>
            <input type="text" placeholder="Type here" className="input bg-gray-300 input-bordered w-full max-w-xs" />
</div>
import React, { useState, useEffect } from "react";
const App = () => {

  return (
    <div>
      <h1 className="text-6xl text-center">Register form</h1>
      <form className=" ">
        <div className="w-1/2 mx-auto border my-8 border-red-400">
          <div className="my-8 ">
            <label className="text-xl mx-6">Name</label>
            <input type="text" placeholder="Type here" className="input bg-gray-300 input-bordered w-full max-w-xs" />
          </div>
          <div className="my-8">
            <label className="text-xl mx-6">Email</label>
            <input type="text" placeholder="Type here" className="input bg-gray-300 input-bordered w-full max-w-xs" />
          </div>

          <div className="ml-4">
            <button className="btn">Submit</button>
          </div>
        </div>
      </form>
    </div>
  );
}

export default App

Here we have created two input fields for name and email. Which is some plain HTML. And we have added a button as well to make some actions on this form.

Listening to users’ inputs

We want to gather everything that a user types with every keystroke and store it somewhere. Simply, we want to get the value that the user entered on a particular input field. And, to do that we have added listeners to each input field. The idea is, that each key change with a keystroke will trigger an event that we want to listen and with it we want the value of it.

  • Add an onChange(), event listener, to the input fields,
<div>
      <h1 className="text-6xl text-center">Register form</h1>
      <form className=" ">
        <div className="w-1/2 mx-auto border my-8 border-red-400">
          <div className="my-8 ">
            <label className="text-xl mx-6">Name</label>
            <input onChange={} type="text" placeholder="Type here" className="input bg-gray-300 input-bordered w-full max-w-xs" />
          </div>
          <div className="my-8">
            <label className="text-xl mx-6">Email</label>
            <input onChange={} type="text" placeholder="Type here" className="input bg-gray-300 input-bordered w-full max-w-xs" />
          </div>

          <div className="ml-4">
            <button className="btn">Submit</button>
          </div>
        </div>
      </form>
    </div>
  • Create functions to get the values from the input fields,
const nameChangeHandler = (event) => {
  console.log('name changed', event.target.value)
}
const emailChangeHandler = (event) => {
  console.log('email changed', event.target.value)
}

Here, we have created two functions for getting the name and email values from the input field. We have passed an argument named, event.

Now, React gives us this event by default. Everything we do on a website triggers some events. With these event props, we can get the things.

This event is an object that contains lots of properties regarding the actions in which this event is being triggered.

As we will pass these functions to the onChange() event in the input fields, these event props will contain every data with each keystroke from the input fields.

From the event object, we will get the value of the input field which the user has entered.

  • Pass the function as a value to the onChange() listeners
import React, { useState, useEffect } from "react";
const App = () => {
  const nameChangeHandler = (event) => {
    console.log('name changed', event.target.value)
  }
  const emailChangeHandler = (event) => {
    console.log('email changed', event.target.value)
  }
  return (
    <div>
      <h1 className="text-6xl text-center">Register form</h1>
      <form className=" ">
        <div className="w-1/2 mx-auto border my-8 border-red-400">
          <div className="my-8 ">
            <label className="text-xl mx-6">Name</label>
            <input onChange={nameChangeHandler} type="text" placeholder="Type here" className="input bg-gray-300 input-bordered w-full max-w-xs" />
          </div>
          <div className="my-8">
            <label className="text-xl mx-6">Email</label>
            <input onChange={emailChangeHandler} type="text" placeholder="Type here" className="input bg-gray-300 input-bordered w-full max-w-xs" />
          </div>

          <div className="ml-4">
            <button className="btn">Submit</button>
          </div>
        </div>
      </form>
    </div>
  );
}

export default App

We have console.logged the targetted value. Now whatever we type in the input fields, those will be visible in the browser console.

As we can see, with each keystroke, the entered keyword is being consoled.

This is how we can listen to some events that are occurring in an input field.