Reactjs How to delete from database

Reactjs How to delete from database
0

#1

I am building a simple crud application using nodejs and reactjs, and facing some issues in the delete part. when i press the delete button, the data from Json database has to get deleted. i tried many codes but couldnt resolve it. Any valuable suggestions will be very useful.

this is the code for client side and server side i had written, the delete part of code has some issue

class User extends Component {

    delete(event) {
        fetch('/user', {
                method: 'DELETE',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    firstname: this.state.firstname,
                    lastname: this.state.lastname,
                })
            }).then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    showUsers: false,
                    users: responseJson
                });
                return;
            })
            .catch((error) => {
                throw (error);
            });
        event.preventDefault();
    }

    render() {
        return ( <
            div className = "User" >
            First Name: {
                this.props.firstname
            } < hr / >
            Last Name: {
                this.props.lastname
            } < hr / >
            <
            button onClick = {
                this.getUsers
            }
            className = "button-primary" > EDIT < /button> <
            button onClick = {
                this.delete.bind(this)
            }
            className = "button-
            danger ">DELETE</button> <
            /div>
        )
    }

}

class User extends Component {

    delete(event) {
        fetch('/user', {
                method: 'DELETE',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    firstname: this.state.firstname,
                    lastname: this.state.lastname,
                })
            }).then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    showUsers: false,
                    users: responseJson
                });
                return;
            })
            .catch((error) => {
                throw (error);
            });
        event.preventDefault();
    }

    render() {
        return ( <
            div className = "User" >
            First Name: {
                this.props.firstname
            } < hr / >
            Last Name: {
                this.props.lastname
            } < hr / >
            <
            button onClick = {
                this.getUsers
            }
            className = "button-primary" > EDIT < /button> <
            button onClick = {
                this.delete.bind(this)
            }
            className = "button-
            danger ">DELETE</button> <
            /div>
        )
    }

}


The following is server side program (Different Folder)


router.delete('/', (req, res) => {
    db.delete(function(err, data) {
        res.json(data)
    });
});

#2

2 posts were merged into an existing topic: React / CRUD app help


#3