react with jquery datatables - NotFoundError: Node.removeChild: The node to be removed is not a child of this node

Question

I am trying to use jquery datatables within a react application. I know that jquery and react do not play nice together. I'm very comfortable with jquery datatables and have not been able to find any comparable react datatable components. I am able to get the table to display with data:

The error occurs when i click on the edit link (circled in read).

Here is the ComponentDidMount:

componentDidMount() {
    var _ = this;
    this.$el = $(this.el);
    this.$el.DataTable(
        {
            processing: true,
            paging: true,
            sPaginationType: "full",
            filter: true,
            destroy: true,
            serverSide: true,
            info: true,
            ajax: {
                url: this.state.endpoint,
                type: "POST",
                contentType: 'application/json',
                data: function (d) {
                    return JSON.stringify(d);
                },
            },
            bAutoWidth: false,
            columns: [
                { title: "Actions", orderable: false },
                { title: "Id", orderable: true },
                { title: "Name", orderable: true },
                { title: "User Name", orderable: true },
                { title: "Created", orderable: true },
            ]
        })


    $('#tblAccounts').on("click", "#btnEdit", function (e) {
        e.preventDefault();
        var id = $(this).attr('data-user-id');
        _.setState({ userId: id, showEditUserModal: true });            
    })
}

When the edit button is clicked it does hit this code:

$('#tblAccounts').on("click", "#btnEdit", function (e) {
        e.preventDefault();
        var id = $(this).attr('data-user-id');
        _.setState({ userId: id, showEditUserModal: true });            
    })

However when it gets to:

_.setState({ userId: id, showEditUserModal: true }); 

I'm getting this error: NotFoundError: Node.removeChild: The node to be removed is not a child of this node

The goal is to set the state for these properties then display an Edit Modal when rendered.

I'm not sure what's causing this error but i'm guessing it might be jquery's DOM manipulation.

Is there any way i would be able to set the state within this jquery function?

Alternatively, is there an existing datatable with sorting, filtering/search and pagination built in that can handle about 100,000 records

Answer 1

using react-bootstrap-table-next