<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
<script type="text/babel">
const { useState, useEffect } = React;
const [selectedRows, setSelectedRows] = useState([]);
const [data, setData] = useState([
{ id: 1, name: "John Doe", email: "john@example.com" },
{ id: 2, name: "Jane Smith", email: "jane@example.com" },
{ id: 3, name: "Bob Johnson", email: "bob@example.com" },
{ id: 4, name: "Alice Williams", email: "alice@example.com" },
{ id: 5, name: "Michael Brown", email: "michael@example.com" },
{ id: 6, name: "Sarah Davis", email: "sarah@example.com" },
{ id: 7, name: "David Anderson", email: "david@example.com" },
{ id: 8, name: "Emily Wilson", email: "emily@example.com" },
{ id: 9, name: "Daniel Taylor", email: "daniel@example.com" },
{ id: 10, name: "Olivia Martinez", email: "olivia@example.com" },
{ id: 11, name: "Matthew Thomas", email: "matthew@example.com" },
{ id: 12, name: "Sophia Hernandez", email: "sophia@example.com" },
{ id: 13, name: "James Lee", email: "james@example.com" },
{ id: 14, name: "Ava Harris", email: "ava@example.com" },
{ id: 15, name: "William Clark", email: "william@example.com" },
{ id: 16, name: "Isabella Lewis", email: "isabella@example.com" },
{ id: 17, name: "Benjamin Young", email: "benjamin@example.com" },
{ id: 18, name: "Mia Walker", email: "mia@example.com" },
{ id: 19, name: "Ethan Hall", email: "ethan@example.com" },
{ id: 20, name: "Charlotte Turner", email: "charlotte@example.com" },
{ id: 21, name: "Alexander Baker", email: "alexander@example.com" },
{ id: 22, name: "Amelia Green", email: "amelia@example.com" },
{ id: 23, name: "Daniel Hill", email: "daniel@example.com" },
{ id: 24, name: "Elizabeth Adams", email: "elizabeth@example.com" },
{ id: 25, name: "Joseph Nelson", email: "joseph@example.com" },
{ id: 26, name: "Grace Ramirez", email: "grace@example.com" },
{ id: 27, name: "Henry Cook", email: "henry@example.com" },
{ id: 28, name: "Victoria Price", email: "victoria@example.com" },
{ id: 29, name: "Samuel Rivera", email: "samuel@example.com" },
{ id: 30, name: "Lily Ward", email: "lily@example.com" },
const handleRowSelection = (rowId, email) => {
if (selectedRows.includes(rowId)) {
setSelectedRows(selectedRows.filter((id) => id !== rowId));
setSelectedRows([...selectedRows, rowId]);
const newData = data.map((row) => {
return { ...row, email };
const handleDeleteRows = () => {
const newData = data.filter((row) => !selectedRows.includes(row.id));
<div className="container">
<h3>React Js Delete Multiple Rows data Using Checkbox</h3>
<button className="delete-button" onClick={handleDeleteRows}>
<table className="data-table">
<th className="select-header">Select</th>
<th className="id-header">ID</th>
<th className="name-header">Name</th>
<th className="email-header">Email</th>
<tr key={row.id} className="data-row">
checked={selectedRows.includes(row.id)}
onChange={() => handleRowSelection(row.id, row.email)}
<td className="id-cell">{row.id}</td>
<td className="name-cell">{row.name}</td>
<td className="email-cell">{row.email}</td>
ReactDOM.render(<App />, document.getElementById("app"));
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: #e74c3c;
background-color: #c0392b;
border-collapse: collapse;
background-color: #f1f1f1;
.data-row:nth-child(even) {
background-color: #f9f9f9;
background-color: #f2f2f2;