Add/Remove Input Fields Dynamically with React Js

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.

react add remove input field dynamically

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

  |    |__images/
  |   |
  |  add-remove-input-field
  |       |__AddRemoveInputField.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([{

    } ]);
    const addInputField = ()=>{

        setInputFields([...inputFields, {
        } ])
    const removeInputFields = (index)=>{
        const rows = [...inputFields];
        rows.splice(index, 1);
   const handleChange = (index, evnt)=>{
    const { name, value } =;
    const list = [...inputFields];
    list[index][name] = value;
        <div className="container">
            <div className="row">
                <div className="col-sm-8">
            , index)=>{
                          const {fullName, emailAddress, salary}= data;
                            <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 className="col">

                 {(inputFields.length!==1)? <button className="btn btn-outline-danger" onClick={removeInputFields}>x</button>:''}
                <div className="row">
                    <div className="col-sm-12">

                    <button className="btn btn-outline-success " onClick={addInputField}>Add New</button>
                <div className="col-sm-4">

export default AddRemoveInputField

2. 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() {
  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