I try to make a simple table that can select rows of the table and delete them when clicking the delete button.
So.. I use the MDBDataTableV5 component.
If I do not put the checkbox in the table then this is working perfectly(when data of table update). And If I set table data as statically when first loading time then this is working well even I put the checkbox in the table.
But in this case, If I set the data of the table as state dynamically then this is not working. I get this error when re-render(when getting data from parents).
mdbreact.esm.js:1 Uncaught TypeError: Cannot read property 'checked' of undefined
at n.value .......
Here is my code.
const headCells = [
{
label: 'id',
field: 'user_id',
width: 150,
attributes: {
'aria-controls': 'DataTable',
'aria-label': 'id',
},
},
{
label: 'name',
field: 'user_name',
width: 200,
},
{
label: 'email',
field: 'user_email',
width: 400,
},
{
label: 'level',
field: 'user_level',
width: 100
}
]
export default function WithCheckBoxes(props) {
const [datatable, setDatatable] = React.useState({
columns: headCells,
rows: [],
});
useEffect(()=>{
setDatatable({
columns: headCells,
rows: props.user_list
})
}, [props]);
return (
<>
<MDBDataTableV5
hover
entriesOptions={[5, 20, 25]}
entries={5}
pagesAmount={4}
data={datatable}
checkbox
headCheckboxID='id'
bodyCheckboxID='checkboxes'
getValueCheckBox={(e) => {
}}
/>
</>
);
}
What is wrong in my code?
I use "With checkboxes table" in this link. https://mdbootstrap.com/docs/react/tables/datatables/