How to Create Form Builder using React and Dynamic State Management ?

Last Updated : 14 Mar, 2024

In web development building forms is a common task. However, creating dynamic forms with varying fields and configurations can be a challenge. This is where a form builder tool comes in handy. In this article, we'll learn how to build a form builder tool using React Hooks for state management, allowing users to dynamically create and customize forms.

Output Preview: Let us have a look at how the final output will look like.

Prerequisites:

Approach to create Form Builder Tool using React:

Inserting and removing the fields in a dynamic way will be done using react-hooks, for example - useState() react-hook will be used in this article for initializing and managing the form state.
To treat all UI Elements differently props were being used so as to pass necessary information from parent to child component in order to customize the input fields accordingly.
For deleting the fields also the id required was passed as props from parent to child.
onClick() event is used on the button for triggering the insert or delete UI element feature.

Steps to create the project:

Step 1: Create new React project using the following command.

npx create-react-app form-builder-app
cd form-builder-app

Folder Structure:

projectStructure — PROJECT STRUCTURE FOR FORM BUILDER TOOL USING REACT

The updated Dependencies in package.json file will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: Create the required folder structure as seen in folder structure and add the following command.

JavaScript

// App.js

import FormBuilderApp from "./components/FormBuilderApp.jsx";

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

export default App;

JavaScript

// FormInputField.js

import React from 'react';

const FormInputField = ({ inputField, deleteInputField }) => {
    let inputFieldElement;

    switch (inputField.type) {
        case 'text':
            inputFieldElement = <input type="text" />;
            break;
        case 'dropdown':
            inputFieldElement = (
                <select>
                    <option value="text1">Text 1</option>
                    <option value="text2">Text 2</option>
                    <option value="text3">Text 3</option>
                </select>
            );
            break;
        case 'checkbox':
            inputFieldElement = (
                <div>
                    <input type="checkbox" 
                           name="checkText1" /> Check Text 1
                    <input type="checkbox" 
                           name="checkText2" /> Check Text 2
                    <input type="checkbox" 
                           name="checkText3" /> Check Text 3
                </div>
            );
            break;
        case 'radio':
            inputFieldElement = (
                <div>
                    <input type="radio"
                           name={`radio-${inputField.id}`} 
                           value="radioText1" /> Radio Text 1
                    <input type="radio" 
                           name={`radio-${inputField.id}`} 
                           value="radioText2" /> Radio Text 2
                    <input type="radio" 
                           name={`radio-${inputField.id}`} 
                           value="radioText3" /> Radio Text 3
                </div>
            );
            break;
        case 'textarea':
            inputFieldElement = <textarea />;
            break;
        case 'date':
            inputFieldElement = <input type="date" />;
            break;
        case 'file':
            inputFieldElement = <input type="file" />;
            break;
        default:
            inputFieldElement = null;
    }

    return (
        <div>
            <label>{inputField.label}</label>
            {inputFieldElement}
            <button onClick={() => deleteInputField(inputField.id)}>
                Delete
            </button>
        </div>
    );
};

export default FormInputField;

JavaScript

// FormBuilderApp.js

import React, { useState } from 'react';
import FormInputField from './FormInputField';

const FormBuilderApp = () => {
    const [inputFields, setInputFields] = useState([]);

    const insertInputField = fieldType => {
        setInputFields([...inputFields,
        { type: fieldType, label: `${fieldType} : `, id: Date.now() }]);
    };

    const deleteInputField = id => {
        setInputFields(inputFields
                            .filter(inputField => inputField.id !== id));
    };

    return (
        <div>
            <div>
                <button onClick={() =>
                    insertInputField('text')}>Insert Text Field</button>
                <button onClick={() =>
                    insertInputField('dropdown')}>
                    Insert Dropdown Field
                </button>
                <button onClick={() =>
                    insertInputField('checkbox')}>
                    Insert Checkbox Field
                </button>
                <button onClick={() =>
                    insertInputField('radio')}>
                    Insert Radio Button Field
                </button>
                <button onClick={() =>
                    insertInputField('textarea')}>
                    Insert Textarea Field
                </button>
                <button onClick={() =>
                    insertInputField('date')}>
                    Insert Date Field
                </button>
                <button onClick={() =>
                    insertInputField('file')}>
                    Insert File Field
                </button>
            </div>
            <br />
            {inputFields.map(inputField => (
                <>
                    <FormInputField key={inputField.id} 
                                    inputField={inputField}
                                    deleteInputField={deleteInputField} />
                    <br />
                </>
            ))}
        </div>
    );
};

export default FormBuilderApp;