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
Now, you can test the form with multiple components yourself by opening the following URL
http://localhost:3000