Hello Developer, In this tutorial, you will learn to add and remove input fields dynamically on a button click with react js. This tutorial is explained with some simple steps that are very easy to understand. So, you should not leave any single step otherwise you may miss some useful points.
If you need a feature that works as – If you click an Add New button then an input field will be added in the DOM. If want to add one more then just click again the Add New button. In this way, you can add more & more input fields according to your needs by clicking the Add New button. Also, you can remove those input fields one by one by clicking the cross (X) button
Here, I have created this functionality with only one input field for Full Name. If you need to create one input field input value= 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 input fields using functional components. Once, you learn it, you can easily create it yourself using the class component.
Learn Also –
Create Dynamic Table From JSON
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-input-field | |__AddRemoveInputField.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 AddRemoveInputField Component
File Name – AddRemoveInputField.js
import { useState } from "react"
function AddRemoveInputField(){
const [inputFields, setInputFields] = useState([{
fullName:'',
} ]);
const addInputField = ()=>{
setInputFields([...inputFields, {
fullName:'',
} ])
}
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">
{(inputFields.length!==1)? <button className="btn btn-outline-danger" onClick={removeInputFields}>x</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 AddRemoveInputField2. Render AddRemoveInputField Component
To render AddRemoveInputField component, you will have to import it in the App component and render it as <AddRemoveInputField /> within the return() method.
File Name – App.js
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import AddRemoveInputField from "./add-remove-input-field/AddRemoveInputField";
function App() {
render(){
return (
<AddRemoveInputField />
);
}
}
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 input fields yourself by opening the following URL in your we browser
http://localhost:3000