Add and remove Multiple Input Fields dynamically in React Js

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