Hello Developer, In this tutorial, you will learn to add and remove multiple input fields dynamically on a button click with react js. This tutorial is explained with complete code step by step. So that you can easily understand and quickly implement it in your projects.
If you need a feature that works as – If you click an Add New button then three input fields will be added at a time in the DOM. If want to add one more in multiple rows then just click again the Add New button. In this way, you can add multiple rows of input fields according to your needs by clicking the Add New button. Also, you can remove those input fields one by one row by clicking the cross (X) button
Here, I have created this functionality with only one input field for Full Name, Email Address & salary. If you need to add more input fields then you can easily customize it but First of all, you will have to understand its working concept.
How To Add and Delete Input Fields using React Js
In this tutorial, I have created functionality to add and remove multiple input fields using functional components. Once, you learn it, you can easily create it yourself using the class component.
Learn Also –
How to delete Single 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
Create a Simple React Todo App
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/ | | | add-remove-multiple-input-fields | |__AddRemoveMultipleInputFields.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 AddRemoveMultipleInputFields Component
File Name – AddRemoveMultipleInputFields
import { useState } from "react"
function AddRemoveMultipleInputFields(){
const [inputFields, setInputFields] = useState([{
fullName:'',
emailAddress:'',
salary:''
} ]);
const addInputField = ()=>{
setInputFields([...inputFields, {
fullName:'',
emailAddress:'',
salary:''
} ])
}
const removeInputFields = (index)=>{
const rows = [...inputFields];
rows.splice(index, 1);
setInputFields(rows);
}
const handleChange = (index, evnt)=>{
const { name, value } = evnt.target;
const list = [...inputFields];
list[index][name] = value;
setInputFields(list);
}
return(
<div className="container">
<div className="row">
<div className="col-sm-8">
{
inputFields.map((data, index)=>{
const {fullName, emailAddress, salary}= data;
return(
<div className="row my-3" key={index}>
<div className="col">
<div className="form-group">
<input type="text" onChange={(evnt)=>handleChange(index, evnt)} value={fullName} name="fullName" className="form-control" placeholder="Full Name" />
</div>
</div>
<div className="col">
<input type="email" onChange={(evnt)=>handleChange(index, evnt)} value={emailAddress} name="emailAddress" className="form-control" placeholder="Email Address" />
</div>
<div className="col">
<input type="text" onChange={(evnt)=>handleChange(index, evnt)} value={salary} name="salary" className="form-control" placeholder="Salary" />
</div>
<div className="col">
{(inputFields.length!==1)? <button className="btn btn-outline-danger" onClick={removeInputFields}>Remove</button>:''}
</div>
</div>
)
})
}
<div className="row">
<div className="col-sm-12">
<button className="btn btn-outline-success " onClick={addInputField}>Add New</button>
</div>
</div>
</div>
</div>
<div className="col-sm-4">
</div>
</div>
)
}
export default AddRemoveMultipleInputFields2. Render AddRemoveMultipleInputFields Component
To render AddRemoveMultipleInputFields component, you will have to import it in the App component and render it as <AddRemoveMultipleInputFields /> within the return() method.
File Name – App.js
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import AddRemoveMultipleInputField from "./add-remove-multiple-input-fields/AddRemoveMultipleInputFields";
function App() {
render(){
return (
<AddRemoveMultipleInputFields />
);
}
}
export default App;3. Run App to Add & Remove Input Fields
First of all, you have to run the following command to run the app.
npm start
Now, you can add & remove multiple input fields yourself by opening the following URL in your web browser