Form with Multiple Components in React Js

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

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

http://localhost:3000