how to delete row from data table after delete request .


Topic: how to delete row from data table after delete request .

sabri bargougui asked 4 years ago

I want to update the data in the table after delete methode . the setstate don't work .

state = {
    users: [],
    tableRows: [],
}

async componentDidMount() {
    await axios.get('http://localhost:3000/admin/users', {
        headers: {
            'x-access-token': localStorage.getItem("token")
        }
    }
    )
        .then(response => response.data)

        .then(data => {

            this.setState({ users: data })

        })

        .then(() => {

            this.setState({ tableRows: this.getusers() })

        });

}

getusers = () => {
    let users = this.state.users.map((user) => {
        return (
            {
                id: user._id,
                name: user.name,
                cin: user.cin,
                delete: <MDBIcon
                    icon='trash'
                    className='red-text'
                    size='1x'
                    style={{ cursor: 'pointer' }}
                    onClick={() => this.handeldelete(user._id)}

                />,
                add: <Analys />
            }
        )
    });

    return users;
}

handeldelete = async userId => {
    await axios.delete("http://localhost:3000/admin/users/" + userId, {
        headers: {
            'x-access-token': localStorage.getItem("token")
        }
    })
    let users = this.state.users.filter(user => user._id !== userId);
    this.setState({ users: users });


};

render() {
    const data = {
        columns: [
            {
                label: 'USER ID',
                field: 'id',
                sort: 'asc',
                width: 150
            },
            {
                label: 'Name',
                field: 'name',
                sort: 'asc',
                width: 270
            },
            {
                label: 'CIN',
                field: 'cin',
                sort: 'asc',
                width: 200
            },
            {
                label: 'Delet',
                field: 'delete',
                sort: 'asc',
                width: 200
            },
            {
                label: 'ADD ANALYS',
                field: 'add',
                sort: 'asc',
                width: 200
            },
        ],
        rows: this.state.tableRows,



    };

    return (

        <MDBDataTableV5 hover data={data} filter='name' proSelect searchTop searchBottom={false} />

    );
} }

>

Blockquote


Piotr Glejzer staff commented 4 years ago

are you a pro user? I see that you are using a proselect prop.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 5.0.0
  • Device: chrome
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No
Tags