I am trying to delete row from my DataTable, the delete action is recorded correctly on the DB and then i am updating my `this.state.data` object. after the delete this is the message i have in my console:
"0: Object { firstName: "Matan", lastName: "Tubul", userName: "matant86@gmail.com", … }
​​
length: 1"

which means the row is deleted, even the message "Showing 1 to 1 of 1 entries" is updated from 2 to 1.

but still i am see 2 rows in my DataTable.

I attached here my code, do you see something that i am missing?

import React, { Component } from 'react'
import { withRouter, Redirect } from 'react-router-dom'
import { MDBDataTable, MDBBtn, MDBIcon, Modal, ModalBody, ModalHeader, ModalFooter, Container, MDBRow, MDBCol } from 'mdbreact';
import { register, getUsersList, deleteUser } from './UserFunctions'


class Register extends Component {
    constructor() {
        super()
        this.state = {
            data: {
                columns: [
                    {
                        label: 'First Name',
                        field: 'firstName',
                        sort: 'asc',
                        width: 150
                    },
                    {
                        label: 'Last Name',
                        field: 'lastName',
                        sort: 'asc',
                        width: 270
                    },
                    {
                        label: 'Email',
                        field: 'userName',
                        sort: 'asc',
                        width: 200
                    },
                    {
                        label: 'Actions',
                        field: 'actions',
                        width: 10
                    }
                ],
                rows: []
            },
            modalIsOpen: false,
            fname: '',
            lname: '',
            email: '',
            modalErrorIsOpen: false,
            modalDeleteUserIsOpen: false,
            userIndexToDelete:-1,
            userToDelete:'',
            error: '',
        }
        this.onChange = this.onChange.bind(this)

    }

    onChange(e) {
        this.setState({ [e.target.name]: e.target.value })
    }

    toggle = (expression) => {
        switch (expression) {
            case 'error':
                this.setState({
                    modalErrorIsOpen: !this.state.modalErrorIsOpen
                });
                break;
            case 'addUser':
                this.setState({
                    modalIsOpen: !this.state.modalIsOpen
                });
                break;
            case 'delUser':
                this.setState({
                    modalDeleteUserIsOpen: !this.state.modalDeleteUserIsOpen
                });
                break;
            default:
        }

    };

    shouldComponentUpdate(newProps, nextState) {
        // return this.state.data != nextState.data;
        return true
    }
    componentDidUpdate(nextProps, nextState) {
       // this.loadUsers()
        console.log("did update")
        this.render()
    }

    loadUsers() {
        getUsersList().then(res => {
            if (res) {
                let resData = this.state.data;
                resData.rows = res.data;
                for (let i = 0; i < resData.rows.length; i++) {
                    resData.rows[i]['actions'] = this.buildUsersTableActions(i)
                }
                this.setState({
                    data: resData
                })
            }
            this.setState({
                error: res.error
            });
        }).catch(err => {
            console.log(err)
        })
    }

    verifyDeleteUser = (index) => {
        this.setState({
            userIndexToDelete: index
        })
        let user = this.state.data.rows[index].userName
        this.setState({
            userToDelete: user
        })
        this.toggle('delUser')

    };

    deleteUser =  () => {
        this.toggle('delUser')
        let index = this.state.userIndexToDelete
        deleteUser(this.state.data.rows[index].userName).then( res => {
            if (res) {
                if ('error' in res) {
                    this.setState({
                        error: res.error
                    });
                    this.toggle('error')
                }else {
                    let resData = this.state.data
                    resData.rows.splice(index,1)
                    this.setState({
                        data:resData,
                        userIndexToDelete: '',
                        userToDelete:''
                    })
                }

            }
        }).catch( err => {
            console.log(err)
        })

    };

    buildUsersTableActions(index) {
        return (
            <MDBRow style={{marginLeft:15}}>
                <MDBBtn color="primary" size="sm"> <MDBIcon icon="pencil" size="lg" className="mr-2"  />Edit</MDBBtn>
                <MDBBtn color="danger" size="sm" onClick={() => this.verifyDeleteUser(index)}> <MDBIcon icon="trash" size="lg" className="mr-2"  />Delete</MDBBtn>
            </MDBRow>
        )
    }

    onSubmit = (e) => {
        e.preventDefault()

        const user = {
            firstName: this.state.fname,
            lastName: this.state.lname,
            userName: this.state.email
        }

        register(user).then(res => {
            if (res) {
                this.toggle('addUser')
                if ('error' in res) {
                    this.setState({
                        error: res.error
                    });
                    this.toggle('error')
                } else {
                    this.props.history.push('/register')
                }

            }
        })
    }

    async componentDidMount() {
        this.loadUsers()
        console.log("Did mount")

    }

    render() {
        if (!localStorage.usertoken) {
            return (<Redirect to="/login"></Redirect>)
        } else {
            if (this.state.data.rows.length < 1) {
                return <Container style={{ display: 'flex', justifyContent: 'center', marginTop: 300 }}>
                    <div className="loader center"></div>
                </Container>
            }
            console.log(this.state.data)
            console.log("render")
            return (
                <Container style={{ marginTop: 80 }}>
                    <Modal isOpen={this.state.modalIsOpen} toggle={() => this.toggle('addUser')}>
                        <ModalHeader toggle={() => this.toggle('addUser')}>Register new user</ModalHeader>
                        <ModalBody>
                            <Container>
                                <MDBRow>
                                    <MDBCol md="12">
                                        <form className='needs-validation'>
                                            <label className="black-text">
                                                First Name
                                            </label>
                                            <input
                                                type="text"
                                                name="fname"
                                                className="form-control"
                                                onChange={this.onChange}
                                                required

                                            />
                                            <div style={{ top: 'auto' }} className="invalid-tooltip">Please provide a valid state.</div>
                                            <br />
                                            <label className="black-text">
                                                Last Name
                                            </label>
                                            <input
                                                type="text"
                                                name="lname"
                                                className="form-control"
                                                onChange={this.onChange}
                                                required
                                            />
                                            <div style={{ top: 'auto' }} className="invalid-tooltip">Please provide a valid state.</div>
                                            <br />
                                            <label className="black-text">
                                                Your email
                                            </label>
                                            <input
                                                type="email"
                                                name="email"
                                                className="form-control"
                                                onChange={this.onChange}
                                                required
                                            />
                                            <div style={{ top: 'auto' }} className="invalid-tooltip">Please provide a valid state.</div>
                                            <br />

                                        </form>
                                    </MDBCol>
                                </MDBRow>
                            </Container>
                        </ModalBody>
                        <ModalFooter>
                            <MDBBtn color="blue-grey" onClick={() => this.toggle('addUser')}>Close</MDBBtn>{' '}
                            <MDBBtn color="dark-green" onClick={this.onSubmit} >Register</MDBBtn>
                        </ModalFooter>
                    </Modal>
                    <Modal modalStyle="warning" isOpen={this.state.modalErrorIsOpen} toggle={() => this.toggle('error')} size="sm">
                        <ModalHeader toggle={() => this.toggle('error')}>Failed</ModalHeader>
                        <ModalBody className="font-weight-bold">
                            {this.state.error}
                        </ModalBody>
                        <ModalFooter>
                            <MDBBtn color="yellow" size="sm" onClick={() => this.toggle('error')}>Close</MDBBtn>
                        </ModalFooter>
                    </Modal>
                    <Modal modalStyle="danger" isOpen={this.state.modalDeleteUserIsOpen} toggle={() => this.toggle('delUser')} size="sm">
                        <ModalHeader toggle={() => this.toggle('delUser')}>Failed</ModalHeader>
                        <ModalBody className="font-weight-bold">
                            Are you sure you want to delete {this.state.userToDelete}?
                        </ModalBody>
                        <ModalFooter>
                            <MDBBtn color="danger" size="sm" onClick={() => this.deleteUser()}>Delete</MDBBtn>
                        </ModalFooter>
                    </Modal>
                    <MDBBtn color="primary" onClick={() => this.toggle('addUser')} style={{ marginBottom: 10 }}>
                        <MDBIcon icon="plus" className="mr-1" /> Add User
                    </MDBBtn>
                    <MDBDataTable hover
                        striped
                        bordered
                        large="true"
                        data={this.state.data}
                        fixed
                    />

                </Container>
            )
        }
    }
}
export default withRouter(Register)