• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar

CodingStatus

- Free Source Code for Web Applications

  • HTML
  • JavaScript
  • jQuery
  • ReactJS
  • Ajax
  • Node.js
  • PHP
  • SQL
  • Interview Questions
  • Installation

Form with Multiple Components in React Js

February 1, 2022 By Md Nurullah

Hello Developer, In this tutorial, you will learn How to create a form with multiple components in react js. This tutorial is explained with some simple steps that are very easy to understand. So, you should not leave any single step otherwise you may miss some useful points.

Here, I have created some components for First Name, Last Name, Email, Password Input Field. Once you learn it, you will customize it according to project  requirements.

react form with multiple components

React Form with Multiple Components

In this tutorial, I have created react js form with multiple components using the functional component. Once, you learn it, you can easily create it yourself using the class component.

Learn Also –

Add & Remove Multiple Input Field Dynamically in React Js

How to Display Form Data in Table using React Js

Add and Delete Table Rows Dynamically using React Js

Password and Confirm Password Validation in React Js

Before getting started, you have to create react app with npm and create the following folders & files within its default folder structure

reactapp/
  |__public/
  |    |__images/
  |__src/
  |   |
  |  form-with-multiple-components/
  |       |__FormWithMultipleComponents.js
  |       |__FirstNameInputField.js
  |       |__LastNameInputField.js
  |       |__EmailInputField.js
  |       |__PasswordInputField.js
  |__App.js
  |__index.js

I have used bootstrap 4 to create a responsive weather app. So, You should install it in your react app.

For more information, you can learn How to use Bootstrap in React Js

1. Create FormWithMultipleComponents Component

File Name – FormWithMultipleComponents.js

import FirstNameInputField from "./FirstNameInputField";
import LastNameInputField from "./LastNameInputField";
import EmailInputField from "./EmailInputField";
import PasswordInputField from "./PasswordInputField";
import { useState } from "react/cjs/react.development";
import SubmitButton from "./SubmitButton";

function FormWithMultipleComponents(){
    const [formData, setFormData] = useState([])
    const [formInputData, setFormInputData] = useState({
        firstName:'',
        lastName:'',
        emailAddress:'',
        password:''
    })
    const handleInputChange=(evnt)=>{
        
    const inputFieldValue = evnt.target.value;
    const inputFieldName = evnt.target.name;
    const NewInputValue = {...formInputData,[inputFieldName]:inputFieldValue}
    setFormInputData(NewInputValue);
    }
    const handleFormSubmit =(evnt)=>{
        evnt.preventDefault();
        const checkEmptyInput = !Object.values(formInputData).every(res=>res==="")
        if(checkEmptyInput)
        {   
           
            console.log( formInputData)
        }
    }
    return (
        <div className="row">
            <div className="col-sm-4">
               <form >
                <FirstNameInputField firstName={formInputData.firstName} handleInputChange={handleInputChange} />
                <LastNameInputField lastName={formInputData.lastName} handleInputChange={handleInputChange} />
                <EmailInputField emailAddress={formInputData.emailAddress} handleInputChange={handleInputChange} />
                <PasswordInputField password={formInputData.password} handleInputChange={handleInputChange} />
                <SubmitButton handleFormSubmit={handleFormSubmit} />
                </form>
            </div>
        </div>
    );
}

export default FormWithMultipleComponents;

2. Create First Name Input Field Component

File Name. FirstNameInputField.js

function FirstNameInputField({handleInputChange, firstName}){

    return (
        <input type="text" onChange={handleInputChange} value={firstName} name="firstName" placeholder="First Name" className="form-control my-3"/>
    );
}

export default FirstNameInputField;

2. Create Last Name Input Field Component

File Name – LastNameInputField.js

function LastNameInputField({handleInputChange, lastName}){

    return (
        <input type="text" onChange={handleInputChange} value={lastName} name="lastName" placeholder="Last Name" className="form-control my-3"/>
    );
}

export default LastNameInputField;

3. Create Email Input Field Component

File Name -EmailInputField.js

function EmailInputField({handleInputChange, emailAddress}){

    return (
        <input type="text" onChange={handleInputChange} value={emailAddress} name="emailAddress" placeholder="Email Address" className="form-control my-3"/>
    );
}

export default EmailInputField;

4. Create Password Input Field Component

File Name – PasswordInputField.js

function PasswordInputField({handleInputChange, password}){

    return (
        <input type="password" onChange={handleInputChange} value={password} name="password" placeholder="Password" className="form-control my-3"/>
    );
}

export default PasswordInputField;

5. Create Submit Button Component

File Name – SubmitButton.js

function SubmitButton({handleFormSubmit}){

    return (
        <button type="button" onClick={handleFormSubmit} className="btn btn-outline-success">Submit</button>
    );
}

export default SubmitButton;

6. Create FormWithMultipleComponents Component

To render the FormWithMultipleComponents component, you will have to import it in the App component and render it as <FormWithMultipleComponents /> within the return() method.

File Name – App.js

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import FormWithMultipleComponents from "./form-with-multiple-components/FormWithMultipleComponents";
function App() {
  render(){
  return (
    <FormWithMultipleComponents />
  )
  }
}
export default App;

7. Test Form With Multiple Components Yourself

First of all, you have to run the following command to run the app.

npm start

Now, you can test the form with multiple components yourself  by opening the following URL

http://localhost:3000

Filed Under: ReactJS

Hey there, Welcome to CodingStatus. My Name is Md Nurullah from Bihar, India. I'm a Software Engineer. I have been working in the Web Technology field for 3 years. Here, I blog about Web Development & Designing. Even I help developers to build the best Web Applications.

Primary Sidebar

Latest Tutorials

  • How to Install Express Application Using Express Generator Tool
  • Registration Form using Ajax, PHP & MySQL
  • Filter Data with Checkboxes in PHP & MySQL
  • Filter Data by Category in PHP & MySQL
  • Filter Prices From Low to High in PHP, MySQL

Popular Tutorials

  • Form with Multiple Components in React Js
  • Password and Confirm Password Validation in React Js
  • Password Strength Checker in React Js
  • Countdown Timer in React Js
  • Add/remove Multiple Input Fileds dynamically in React Js

Categories

  • Ajax (11)
  • Django (5)
  • HTML (4)
  • Installation (3)
  • Interview Questions (5)
  • JavaScript (20)
  • jQuery (11)
  • Laravel (2)
  • Node.js (23)
  • PHP (42)
  • ReactJS (35)
  • SQL (12)
  • Tips (7)
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2023 CodingStatus - All Rights Reserved