I have a react table rendering data that I can get using axios from mysql database. Each table row has checkbox. I am able to check/uncheck all checkboxes using that checkbox in <thead>.

I need to write code for the function deleteAll() and call the onClick event of the Delete button (This will get values of all checked checkboxes and pass it to the API to delete the records having those values as IDs)

Here is my code

import React from "react";
import axios from "axios";
import { useState, useEffect} from "react";
import { Link } from "react-router-dom";
import Table from 'react-bootstrap/Table'
import Dashboard from "../login/dashboard";
import { toast } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'

const UserGroup = () => {

    const [data, setData] = useState([]);

    function dataRender(item, index) {

        return (
            <tr key={index  1}>
                <td className="text-center"><input 
                        type="checkbox" className="form-check-input"
                        key={item.id}
                        id={item.id}
                        name={item.id}
                        value={item.id}
                        checked={item?.isChecked || false}
                        onChange={handleChange}
                        /></td>
                <td className="text-center">{index   1}</td>
                <td className="text-center">{item.id}</td>
                <td className="text-left">{item.name_eng}</td>
                <td className="text-right">{item.name}</td>
                <td className="text-center">{(item.active == 1) ? 'Yes' : 'No'}</td>
            </tr>
        )
      }

    useEffect(() =>{
        loadData();
    }, [])

    const loadData = async ()=>{
        await axios.get('http://localhost/sits_api/sysAdmin/userGroup.php')
        .then((result)=>{
            setData(result.data);
        })
    }


    const deleteAll = ()=>{
     // I NEED TO CODE THIS FUNCTION
    }
    
     
    // hand CHECK ALL CHECKBOXES
    const handleChange = (e) => {
        const {name, checked} = e.target;

        if(name==="allSelect")
            {
                let tempItem = data.map((item) => {
                    return {...item, isChecked: checked }
                });
                setData(tempItem);
            }
        else
            {
                let tempItem = data.map((item) =>
                item.id === name ? {...item, isChecked: checked } : item
                );
                setData(tempItem);
            }
    }
    /////////////////////
    return(
        <>
            <Dashboard/>

            <div className="div-content">
                <div>
                    <label className="headline">User Groups List</label>
                    <nav className="navbar navbar-expand-bg navbar-light">
                        <div className="container">
                            <Link className="btn btn-primary" to={'/usergroupadd'}>Add New</Link>
                            <Link className="btn btn-danger" to=''onClick={() => {deleteAll()}}>Delete</Link>
                        </div>
                    </nav>                  
                </div>

                <Table striped bordered hover>
                    <thead>
                        <tr>
                            <th className="text-center"><input
                                type="checkbox" className="form-check-input"
                                name="allSelect"
                                checked={data.filter((item) => item?.isChecked !== true).length < 1}
                                onChange={handleChange}
                                /></th>
                            <th className="text-center">#</th>
                            <th className="text-center">ID</th>
                            <th className="text-left">Eng. Name</th>
                            <th className="text-right">الاسم العربى</th>
                            <th className="text-center">Active</th>
                        </tr>
                    </thead>
                    <tbody>
                        {data.map(dataRender)}
                    </tbody>
                </Table>
            </div>
        </>
    );
}
export default UserGroup;

CodePudding user response：

const deleteAll = () => {
  const allInputs = document.getElementsByClassName('form-check-input');

  const selectedCheckboxIds = allInputs.filter(input => input.checked).map(input => input.value);

  axios.delete('endpointUrl', { selectedCheckboxIds });
}

CodePudding user response：

i found a solution, i put it here if it could help someone.

const deleteAll = async () =>{ 
        // make an array of the checked checkboxes values
        let ids = [];

        let checkboxes = document.getElementsByClassName('form-check-input');

        for (var i = 0; i < checkboxes.length; i  ) {
            if(checkboxes[i].checked == true){
                ids.push(checkboxes[i].value);
            }
        }
 }