Form with Multiple Components in React Js

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

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 –

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/