ReactJS Add Remove Inputs Fields Dynamically
Install bootstrap
npm install react-bootstrap bootstrap@5.1.3
C:\reactdev\myreactdev>npm install react-bootstrap bootstrap@5.1.3
https://react-bootstrap.github.io/getting-started/introduction/
run
C:\reactdev\myreactdev>npm start src/index.js
//src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import 'bootstrap/dist/css/bootstrap.min.css' ReactDOM.render(public/index.html, document.getElementById('root') )
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
import React, { useState } from "react";
function Addmoreinput() {
const [inputList, setinputList]= useState([{firstName:'', lastName:''}]);
const handleinputchange=(e, index)=>{
const {name, value}= e.target;
const list= [...inputList];
list[index][name]= value;
setinputList(list);
}
const handleremove= index=>{
const list=[...inputList];
list.splice(index,1);
setinputList(list);
}
const handleaddclick=()=>{
setinputList([...inputList, { firstName:'', lastName:''}]);
}
return (
<div className="container">
<div className="row">
<div className="col-sm-12">
<h5 className="mt-3 mb-4 fw-bold">ReactJS Add Remove Inputs Fields Dynamically</h5>
{
inputList.map( (x,i)=>{
return(
<div className="row mb-3">
<div class="form-group col-md-4">
<label >First Name</label>
<input type="text" name="firstName" class="form-control" placeholder="Enter First Name" onChange={ e=>handleinputchange(e,i)} />
</div>
<div class="form-group col-md-4">
<label >Last Name</label>
<input type="text" name="lastName" class="form-control" placeholder="Enter Last Name" onChange={ e=>handleinputchange(e,i) }/>
</div>
<div class="form-group col-md-2 mt-4">
{
inputList.length!==1 &&
<button className="btn btn-danger mx-1" onClick={()=> handleremove(i)} style={{marginBottom: 10}}>Remove</button>
}
{ inputList.length-1===i &&
<button className="btn btn-success" onClick={ handleaddclick}>Add More</button>
}
</div>
</div>
);
} )}
</div>
</div>
</div>
);
}
export default Addmoreinput;
