-
Notifications
You must be signed in to change notification settings - Fork 40
/
Delete Multiple records using Checkbox in react js
104 lines (91 loc) · 3.15 KB
/
Delete Multiple records using Checkbox in react js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import React,{ useEffect, useState } from "react";
import { Container } from 'react-bootstrap';
import axios from "axios";
function Deletemultiplerow()
{
const [userData, setUserdata]= useState([]);
const [delMessage, setDelmessage]= useState('')
useEffect( ()=>{
const getData= async()=>{
const reqData= await fetch("http://localhost/devopsdeveloper/userdata/getuser");
const resData= await reqData.json();
setUserdata(resData);
}
getData();
},[]);
const handleChange=(e)=>{
const { name, checked}= e.target;
if(name==="allselect")
{
const checkedvalue = userData.map( (user)=>{ return {...user, isChecked:checked}});
console.log(checkedvalue);
setUserdata(checkedvalue);
} else{
const checkedvalue= userData.map( (user)=>
user.username ===name? {...user, isChecked:checked}:user);
console.log(checkedvalue);
setUserdata(checkedvalue);
}
}
const handlealldelete = async()=>{
const checkedinputvalue=[];
for(let i=0; i<userData.length; i++)
{
if(userData[i].isChecked===true)
{
checkedinputvalue.push(parseInt(userData[i].userid));
}
else
{
alert("Please select at least one checkbix");
}
}
const responce= await axios.post(`http://localhost/devopsdeveloper/userdata/deletecheckboxuser`, JSON.stringify(checkedinputvalue));
setDelmessage(responce.data.msg);
}
return(
<React.Fragment>
<Container className="content">
<div className="row">
<div className="col-sm-12">
<h2 className="mt-4 mb-4 fw-bold">
Delete Multiple row data in React Js
</h2>
<h5 className="text-danger">{ delMessage } </h5>
<button className="btn btn-danger mb-3" onClick={ ()=>{ handlealldelete()}}>All Delete </button>
<form className="form w-100">
<table className="table">
<thead>
<tr>
<th>
<input type="checkbox" name="allselect" checked= { !userData.some( (user)=>user?.isChecked!==true)} onChange={ handleChange} />
</th>
<th>Sr. No</th>
<th>User Name</th>
<th>Email</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{ userData.map( (getusers, index)=>(
<tr key={index}>
<th> <input type="checkbox" name={ getusers.username} checked={getusers?.isChecked|| false } onChange={ handleChange } /></th>
<td>{ index+1} </td>
<td>{ getusers.username} </td>
<td>{ getusers.useremail} </td>
<td>{ getusers.useraddress} </td>
<td><button className="btn btn-danger">Delete</button></td>
</tr>
))
}
</tbody>
</table>
</form>
</div>
</div>
</Container>
</React.Fragment>
);
}
export default Deletemultiplerow;