Add and remove Multiple Input Fields dynamically in 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

Steps to dynamically add and remove multiple input fields in components or forms:

• 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