How to push elements to react hooks state array

Question

I am using react-bootstrap-table2 to make HTML tables, I am using a checkbox inside my table to delete the items.

SO as per This link, it is mentioned how to get the selected row and then do the next part, here what I am doing is when I click on any checkbox row gets selected, and if I again select any row that I am adding to the array into my state like below

onSelect: (row, isSelect, rowIndex, e) => {
        if (isSelect === true) {
            setrowData((rowData) => [...rowData, row]);
        } else {
        //  here i need to do something
        }
    },

My issue is when I unselect the row that value is not getting deleted from my array, and at the time of delete, I have all the data which I have selected once.

• One more thing which is related to this is when I check any row I want to show delete button and when none of the rows is checked I want to hide the delete button, here select is giving me the boolean value for that, but it is working for each select once I am selecting multiple rows it shows up, but when I unselect any one of them the delete button hides

What I have done for that is something like below

setrowSelect((rowSelect) => [...rowSelect, isSelect]); // this one is inside onSelect callback given by the react-bootstrap-table2 library

           {rowSelect && (
                    <button className="btn Secondary_Button_with_Icon">
                        <i className="ri-upload-cloud-line ri-lg"></i>Register
                    </button>
                )}

My full working code

Answer 1

Note that, you don't need to maintain another state for controlling visibility of Delete button.

You can perfectly hide/show Delete based on rowData state.

Also the code you wrote for handling selected rows works perfectly well. Just get rid of rowSelect state and its handlers.

And update the rendering of your Delete button based on contents of your rowData as:

{
    rowData.length ? (
        <button className="btn btn-primary" onClick={Delete_device}>
          <i className="ri-upload-cloud-line ri-lg"></i>Delete
        </button>
      )
    : null
}

This is the forked sandbox from yours.