Topic: Datatable(with checkboxes) not working when re-render from state updated
silver star216 asked 4 years ago
Hello. I try to make a simple table that can select a row of the table and delete this when click 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 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) => {
}}
/>
</>
);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 5.0.0
- Device: desktop
- Browser: chrom
- OS: Windows
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 4 years ago
can you show me your data from
props.user.list
Nikhil Kothari commented 3 years ago
I have the same issue. i noticed when i remove a row that consist jsx element then the checkbox appears and no undefined message is shown. Please update the code MDB Team.
Krzysztof Wilk staff commented 3 years ago
Could you create a simple project that shows this issue? Which version of MDBReact do you use?