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

CodingStatus

- Level Up Your Status with Coding Expertise!

  • Tutorials
    • React Js Tutorials
    • JavaScript Tutorials
    • PHP Tutorials
    • HTML Tutorials
    • SQL Tutorials
    • Laravel Tutorials
  • Snippets
    • React Js Code Snippets
    • Ajax Code Snippets
    • Node.js Code Snippets
    • JavaScript Code Snippets
    • jQuery Code Snippets
    • SQL Code Snippets
  • Programs
    • PHP Program
    • Python Programs
    • Java Programs
  • How To
    • React Js How To
    • Node Js How To
    • Ajax How To
    • PHP How To
    • jQuery How To
    • JavaScript How to
  • Scripts
    • PHP Script
    • Js Script
    • React Js Script
    • JQuery Script
  • Projects
    • PHP Project
  • Interview Questions
  • Guide
  • API Integration
  • Installation

Form with Multiple Components in React Js

February 1, 2022 By Md Nurullah

In React.js, creating a form with multiple components involves breaking down the form into smaller reusable components for better organization and maintainability. This approach is commonly used to build complex forms
In this tutorial, we will create a form with two components personal info and address info. once you learn it, you can create any form with more than two components.

Table of Contents

  • Steps to create Form with multiple components
    • 1. Set Up Basic Configuration
    • 2. Create Directory Structure
  • 1. Create a personal Info Component
    • 2. Create Address Info Component
    • 3. Create a Form Component
    • 4. Import & Use Form Component
    • 5. Run React App

Steps to create Form with multiple components

Now, Let’s start to create a form with multiple components with the following simple steps

1. Set Up Basic Configuration

First of all, You must set up the following basic configuration –

  • Install Node.js & npm
  • Install React App Project

2. Create Directory Structure

After creating the React App, You will get the default directory structure. Now, Create a calculator directory like –

myapp
 |__src/
    |__ components/
    |    |__form-with-multiple-components/
    |         |__ Form.js
    |         |__ PersonalInfo.js
    |         |__ AddressInfo.js
    |__ App.js
    |__ index.js

Default React App contains more folders & files but  I have shown here only one

1. Create a personal Info Component

This code is a React functional component called PersonalInfo that is designed to display and capture personal information, such as a person’s first name, last name, and email.

It accepts a prop called onChange, which is a callback function that will be called whenever any of the input fields in this component change.

File Name – PersonalInfo.js

import React from "react";

function PersonalInfo({ onChange }) {
  const handleChange = (e) => {
    const { name, value } = e.target;
    onChange({ [name]: value });
  };

  return (
    <div>
      <h4>Personal Info</h4>
      <label htmlFor="firstName">First Name:</label>
      <input
        type="text"
        id="firstName"
        name="firstName"
        onChange={handleChange}
        className="form-control"
      />
      <label htmlFor="lastName">Last Name:</label>
      <input 
        type="text"
        name="lastName" 
        onChange={handleChange} 
        className="form-control"
        />
         <label htmlFor="Email">Email:</label>
        <input 
        type="text"
        name="email" 
        onChange={handleChange} 
        className="form-control"
        />
    </div>
  );
}

export default PersonalInfo;
  • It’s a React functional component named `PersonalInfo` designed to capture personal information.
  • It accepts an `onChange` prop, which is a callback function.
  • The `handleChange` function is called when input fields change. It extracts the field name and value, and then calls the `onChange` callback with this data.
  • It has input fields for first name, last name, and email, each with an associated label.
  • The component is exported as the default export for use in other parts of the application.

2. Create Address Info Component

This code is a React functional component named AddressInfo that represents a form for capturing address information. It takes a prop called onChange, which is a function that will be called whenever there’s a change in the input fields. The purpose of this component is to encapsulate the address input fields and handle their changes.

File Name – AddressInfo.js

import React from "react";

function AddressInfo({ onChange }) {
  const handleChange = (e) => {
    const { name, value } = e.target;
    onChange({ [name]: value });
  };

  return (
    <div>
      <h4>Address Info</h4>
      <label htmlFor="address">Address:</label>
      <input 
      type="text" 
      name="address" 
      onChange={handleChange} 
      className="form-control"/>

      <label htmlFor="city">City:</label>
      <input 
      type="text" 
      name="city" 
      onChange={handleChange} 
      className="form-control" />
    </div>
  );
}

export default AddressInfo;
  • It’s a React functional component called AddressInfo that represents an address information form.
  • It takes a prop onChange, which is a function to be called when input fields change.
  • The handleChange function processes input field changes and calls onChange with the updated values.
  • JSX is returned, including input fields for “Address” and “City” with associated labels.
  • The onChange prop allows a parent component to capture and respond to changes in the input fields.
  • The component is exported as the default export for use in other parts of the application.

3. Create a Form Component

This code is a React component that represents a form with two sections: “PersonalInfo” and “AddressInfo.” It uses the useState hook to manage form data and updates it when the user fills in their personal and address information

File Name – Form.js

import React, { useState } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import PersonalInfo from "./PersonalInfo";
import AddressInfo from "./AddressInfo";

function Form() {
  const [formData, setFormData] = useState({
    personalInfo: {},
    addressInfo: {},
  });

  const handlePersonalInfoChange = (personalInfo) => {
    setFormData({ ...formData, personalInfo });
  };

  const handleAddressInfoChange = (addressInfo) => {
    setFormData({ ...formData, addressInfo });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Form Data:", formData);
  };

  return (
    <div className="row">
    <div className="col-sm-4">
    <form onSubmit={handleSubmit}>
      <PersonalInfo onChange={handlePersonalInfoChange} />
      <AddressInfo onChange={handleAddressInfoChange} />
      <button type="submit" className="btn btn-primary">Submit</button>
    </form>
    </div>
    <div className="col-sm-8"></div>
    </div>
  );
}

export default Form;
  • The component imports React, useState hook from React, and CSS styles from the Bootstrap library.
  • It also imports two custom components, PersonalInfo and AddressInfo, which are assumed to contain input fields for personal and address information.
  • Inside the component function Form, it initializes a state variable formData using the useState hook. formData is an object with two empty objects as properties: personalInfo and addressInfo.
  • Two functions, handlePersonalInfoChange and handleAddressInfoChange, are defined. These functions take an object as an argument (representing personal or address information) and update the formData state by merging the new information with the existing data.
  • The handleSubmit function is called when the form is submitted. It prevents the default form submission behavior and logs the current state of formData to the console.
  • The return statement renders the form layout using Bootstrap classes. It includes two columns: one for the form (personal and address information) and the other for additional content (col-sm-8).
  • Inside the form, it renders the PersonalInfo and AddressInfo components, passing the handlePersonalInfoChange and handleAddressInfoChange functions as props. These components are expected to handle user input for personal and address information.
  • Finally, a “Submit” button is rendered within the form, and its click event triggers the handleSubmit function when clicked.

4. Import & Use Form Component

Now, import the Form component in the App component

File Name –  App.js

import React from 'react';
import Form from './components/form-with-multiple-component/Form';


function App() {
  return (
    <div className="App">
      <Form />
    </div>
  );
}

export default App;

5. Run React App

To display the React with multiple components in a web browser, first run the following command in your terminal.

npm start

After that, open the following URL in your web browser to see the calculator

http://localhost:3000/

Filed Under: React Js Code Snippets

Hello Developer, Welcome to my Blog. I'm Md Nurullah, a software engineer with 5+ years in full-stack web development. As the founder of CodingStatus.com, I'm passionate about sharing coding knowledge and collaborating for a brighter future. Let's connect and code together!

Primary Sidebar

Secondary Sidebar

React Js Code Snippets,
  • How to create reusable input field in react Js
  • How to Create Reusable Select Field in React Js
  • How to Create Reusable Textarea Field in React Js
  • Dynamic Multi-Step Form in React Js
  • Form with Multiple Components in React Js
  • Password and Confirm Password Validation in React Js
  • Add/remove Multiple Input Fileds dynamically in React Js
  • Show and Hide Password using React Js
  • Add/Remove Input Fields Dynamically with React Js
  • Add and Delete Table Rows Dynamically using React Js
  • Create dynamic table from JSON in React js
  • Preview Multiple Images Before Uploading in React Js
  • Increment Decrement Counter in React hooks
  • Create Charts in React Js
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2023 CodingStatus - All Rights Reserved