Topic: Datatable(with checkboxes) not working when re-render from state updated

silver star216 free asked 3 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) => {

        }}
      />
    </>
  );
}

Piotr Glejzer staff commented 3 years ago

can you show me your data from props.user.list


Nikhil Kothari free 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?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: 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