Create Form With useState Hook In ReactJS

Introduction

In this article, you will learn the following things,

• Controlled Form using Function Component.
• What is the Controlled Component?
• What is the Uncontrolled Component?
• Use of useState hook.
• Display the Form Data on Console Log - (Event Management)

What is Form?

The form is one of the primary ways to receive input from the user. Let's start working on our above tasks.

Create a ReactJS application with the help of the following command,

npx create-react-app MEMBERAPP

Now in the following folder, create a Member.js file.

Folder Path is

MemberApp -> Src ->

What is a Controlled Component?

Controlled components refer to components with their state and behavior controlled by the parent component.

What is an UnControlled Component?

Controlled components refer to components that manage their state internally.

We are creating a controlled react form because we are using useState.

Form Creation using useState is very simple with the following points.

1. Declare Function Component
2. Declare state variables by calling the useState Hook.
3. Declare HandleChange method.
4. Declare HandleSubmit we
5. Write Html with the event inside Return Method.

Declare Function Component,

import React from 'react'
import { useState } from 'react';

export default function Member(){
return (
    <div>
    </div>
  );
}

Declare state variables by calling the useState Hook,

const [memberData, setMemberData] = useState({
    Fullname: "",
    Age: "",
    EmailID: "",
    Mobile: "",
    Fees: ""
});

Declare HandleChange method,

const handleChange = (event) => {
    setMemberData({
        ...memberData,
        [event.target.name]: event.target.value
    })
};

Declare HandleSubmit method,

const handleSubmit = (event) => {
    event.preventDefault();
    console.log(memberData);
};

Write Html with the event inside Return Method.

<form onSubmit={handleSubmit}>
<div>
     <h1>Club Membership Form</h1>
</div>
      <div>
          <table>
               <tr>
                   <td>
                        Fullname
                    </td>
                    <td>
                        <input id="txtFullname" name="Fullname"
                        placeholder="Member Fullname" value={memberData.Fullname}
                        onChange={handleChange}/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Age
                    </td>
                    <td>
                        <input id="txtAge" name="Age"
                         placeholder="Member Age" value={memberData.Age}
                         onChange={handleChange}/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Email ID
                    </td>
                    <td>
                        <input id="txtEmailID" name="EmailID"
                         placeholder="Member Email ID" value={memberData.EmailID}
                         onChange={handleChange}/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Mobile
                    </td>
                    <td>
                        <input id="txtMobile" name="Mobile"
                        placeholder="Member Mobile" value={memberData.Mobile}
                        onChange={handleChange}/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Fees
                    </td>
                    <td>
                        <input id="txtFees" name="Fees"
                        placeholder="Member Fees" value={memberData.Fees}
                        onChange={handleChange}/>
                    </td>
                </tr>
                <tr>
                    <td colSpan ="2">
                        <button onClick={handleSubmit}>Submit</button>
                    </td>      
                </tr>
           </table>
      </div>
</form>

Output

OnSubmit displayed data on the console

FullSource Code

import React from 'react'
import { useState } from 'react';

export default function Member(){
    const [memberData, setMemberData] = useState({
        Fullname: "",
        Age: "",
        EmailID: "",
        Mobile: "",
        Fees: ""
      });
      const handleChange=(event)=>{
        setMemberData({...memberData,[event.target.name]: event.target.value})
            };
      const handleSubmit = (event) => {
       event.preventDefault();
        console.log(memberData);
      };
return (
<div>
    <form onSubmit={handleSubmit}>
        <div>
            <h1>Club Membership Form</h1>
        </div>
        <div>
            <table>
                <tr>
                    <td>
                        Fullname
                    </td>
                    <td>
                        <input id="txtFullname" name="Fullname"
                        placeholder="Member Fullname" value={memberData.Fullname}
                        onChange={handleChange}/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Age
                    </td>
                    <td>
                        <input id="txtAge" name="Age"
                         placeholder="Member Age" value={memberData.Age}
                         onChange={handleChange}/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Email ID
                    </td>
                    <td>
                        <input id="txtEmailID" name="EmailID"
                         placeholder="Member Email ID" value={memberData.EmailID}
                         onChange={handleChange}/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Mobile
                    </td>
                    <td>
                        <input id="txtMobile" name="Mobile"
                        placeholder="Member Mobile" value={memberData.Mobile}
                        onChange={handleChange}/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Fees
                    </td>
                    <td>
                        <input id="txtFees" name="Fees"
                        placeholder="Member Fees" value={memberData.Fees}
                        onChange={handleChange}/>
                    </td>
                </tr>
                <tr>
                    <td colSpan ="2">
                        <button onClick={handleSubmit}>Submit</button>
                    </td>
                </tr>
            </table>
        </div>
      </form>
   </div>
  );
}