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:
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;
Output:
OUTPUT GIF FOR FORM BUILDER TOOL USING REACT
Share your thoughts in the comments
Please Login to comment...