//import React and useState
import React, { useState } from ‘react’;
//Create a component
const App = () => {
//Create a state to store the input fields
const [inputFields, setInputFields] = useState([
{ firstName: ”, lastName: ” },
]);
//Create a function to add input fields
const handleAddFields = () => {
const values = […inputFields];
values.push({ firstName: ”, lastName: ” });
setInputFields(values);
};
//Create a function to remove input fields
const handleRemoveFields = (index) => {
const values = […inputFields];
values.splice(index, 1);
setInputFields(values);
};
//Create a function to handle input change
const handleInputChange = (index, event) => {
const values = […inputFields];
if (event.target.name === ‘firstName’) {
values[index].firstName = event.target.value;
} else {
values[index].lastName = event.target.value;
}
setInputFields(values);
};
//Render the component
return (
Add and remove Multiple Input Fields dynamically in React Js
{inputFields.map((inputField, index) => (
handleInputChange(index, event)}
/>
handleInputChange(index, event)}
/>
))}
);
};
export default App;
Dynamically add and delete/remove input fields in a form using react js; Through this tutorial, we will learn how to create dynamically add and delete/remove input fields in a form using react js.
How to Create Dynamically Add and Remove Multiple Input Fields React js
Just follow the following steps to dynamically add and remove multiple input fields react js:
- Step 1 – Create React App
- Step 2 – Install Bootstrap
- Step 3 – Create AddRemoveMultipleInputFields Component
- Step 4 – Render AddRemoveMultipleInputFields Component
- Step 5 – Start React js App
Step 1 – Create React App
In this step, open a terminal and execute the following command on the terminal to create a new react app:
npx create-react-app my-react-app
To run the React app, execute the following command on your terminal:
npm start
Check out your React app on this URL: localhost:3000
Step 2 – Install Bootstrap
In this step, execute the following command to install react boostrap library into react app:
npm install bootstrap --save
Step 3 – Create AddRemoveMultipleInputFields Component
In this step, create AddRemoveMultipleInputFields .js file. And add the following code into it:
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 AddRemoveMultipleInputFields
Step 4 – Render AddRemoveMultipleInputFields Component
In this step, import the AddRemoveMultipleInputFields component in app.js file:
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;
Step 5 – Start React js App
Execute the following command on terminal to start the React App:
npm start
Then hit the following url on web browser:
http://localhost:3000
Conclusion
That’s it; Through this tutorial, we have learned how to create dynamically add and delete input fields in a form using react js.
