Add and remove Multiple Input Fields dynamically in React Js

//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.

Recommended React JS Posts

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
San Vito Al Tagliamento 33078
Pordenone Italy
Item added to cart.
0 items - 0.00
Open chat
Scan the code
Hello 👋
Can we help you?