How to Add and Remove Row Dynamically : React is a front-end library created by Facebook. It is utilized for dealing with the view layer for web and portable applications. ReactJS permits us to make reusable UI segments. It is right now perhaps the most well known JavaScript libraries and has a solid establishment and huge local area behind it.

This instructional exercise will help JavaScript engineers who look forward to manage ReactJS interestingly. We will attempt to present each idea by showing basic code models that can be handily perceived. Subsequent to completing every one of the parts, you will feel sure working with ReactJS. As a little something extra we will present extra components that function admirably with ReactJS to assist you with learning the prescribed procedures and pursue the advanced JavaScript directions.

Introduction to the Blog

This tutorial will teach you how to add and remove rows from the network.

This instructional exercise additionally covers the Reactive structure approvals on powerfully created components and reset structure in the wake of presenting the structure.

In the wake of Researching numerous things over google about this usefulness the websites were not covering everything simultaneously.

So I chose to compose code myself and offer it with each and every individual who actually needs it.

This will required to Setup ReactJS Locally on you system along with Node JS : See here

We should begin :

It will require 2 Files.

app.js

app.css

App.js :

In this file you will have to install two dependency :

npm install react-bootstrap

and  then

npm install react-bootstrap bootstrap

 

import './App.css';
import React , {useState}   from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container } from 'react-bootstrap';
function App() {
//------------Contact Information Phone Script starts here------------- //
const[contactPhoneList, setcontactPhoneList] = useState([
{contactPhoneType: "Program 1", contactCountryCode: "Test", contactMobileNumber: "9050131191", contactExtension: "Extension 1", contactIsPrefered : true}]
) 
const cPhoneHandleChange = (e,index) => {  
let {id, value} = e.target; // accessing the value of element by ID\ 
//Checking if element is checkbox or not and setting it's value true 
if(e.target.checked == true && e.target.type === 'checkbox'){
value = true;
}
//Checking if element is checkbox or not and setting it's value false
else if(e.target.checked == false &&  e.target.type === 'checkbox'){   
value=false;
} 
const cPhonelist = [...contactPhoneList];
cPhonelist[index][id] = value; 
setcontactPhoneList(cPhonelist);
}
const cPhonehandleAddInput = () => {
setcontactPhoneList([...contactPhoneList, {contactPhoneType: "Program 1", contactCountryCode: "Test", contactMobileNumber: "9050131191", contactExtension: "Extension 1",contactIsPrefered : true}])
}
const cPhoneHandleRemoveInput = (index) => {
const cPhonelist = [...contactPhoneList];
cPhonelist.splice(index, 1);
setcontactPhoneList(cPhonelist);
}
//------------Contact Information Phone ends starts here------------- //  
return (
<div className="App">
<header className="App-header">
<Container>
<div class="row result">
{JSON.stringify(contactPhoneList , null , 2)}
</div>
{contactPhoneList.map((item,i) => {
return(
<div className="row">
<div className="col-md-2 col-6">
<div className="form-group floating">
<select className="form-select" id="contactPhoneType" value={item.contactPhoneType} onChange={e => cPhoneHandleChange(e,i)}>
<option selected disabled value="">Phone Type</option>
<option>Personal</option> 
<option>Work</option>    
<option>Alternate</option>      
<option>PA</option>                   
</select>
</div>
</div>
<div className="col-md-2 col-6">
<div className="form-group floating">
<select className="form-select" id="contactCountryCode" value={item.contactCountryCode} onChange={e => cPhoneHandleChange(e,i)} required >
<option selected disabled value="">Country Code</option>
<option>+1</option> 
<option>+2</option>    
<option>+3</option>      
<option>+4</option>                   
</select>
<div className="invalid-feedback">
Please select Country Code.
</div>
</div>
</div>                            
<div className="col-md-2 col-6">
<div className="form-group">
<input type="text" id="contactMobilenumber" className="form-control" placeholder="Number" name="contactMobilenumber" value={item.contactMobilenumber} onChange={e => cPhoneHandleChange(e,i)} required />
</div>
</div>
<div className="col-md-2 col-6">
<div className="form-group">
<input type="text" id="contactExtension" className="form-control" placeholder="Extension" name="cextension" value={item.contactExtension} onChange={e => cPhoneHandleChange(e,i)} />

</div>
</div>
<div className="col-md-2 col-6">
<div className="d-flex ">
<label htmlFor="floatingInput">Active
</label>
<div className="form-check form-switch ms-3">
<input className="form-check-input contactIsPrefered" type="checkbox" id="contactIsPrefered" defaultChecked={item.contactIsPrefered} value={item.contactIsPrefered}  onChange={e => cPhoneHandleChange(e,i)}/>
<label className="form-check-label" htmlFor="contactIsPrefered" />
</div>
</div>
</div>
<div className="col-md-2 col-6">
<div className="actionContainer ">
{contactPhoneList.length - 1 === i &&
// <button type="button" className="btn btn-primary">Add More</button>
<a href className="ms-4" onClick={cPhonehandleAddInput} >
<img src="https://img.icons8.com/color/48/000000/add.png"/>
{/* <div className="icon dripicons-trash" /> */}
</a> 

}                                
{contactPhoneList.length !== 1 &&
<a href className="ms-4" onClick={e => cPhoneHandleRemoveInput(i)}>
<img src="https://img.icons8.com/color/48/000000/delete-sign--v1.png"/>
{/* <div className="icon dripicons-trash" /> */}
</a>  
}                                   
</div>
</div>                                
</div>   
)
})}
</Container>
</header>
</div>
);
}
export default App;

App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.result{
  height: 200px;
  overflow: scroll;
  border: 1px solid;
  background-color: #3e3e3e;
  margin-bottom: 30px;
  font-size: 14px;
}

 

Please follow and like us: