CODEWITHSUNDEEP
javascriptreactjsrest
andrew17
andrew17

Reputation: 925

How to implement DELETE method in axios and React?

I cannot implement delete button. I have api endpoint 'DELETE /.../{id}'. Have ApiService.js:

deleteById(id) {
        return axios.delete(`${ACCOUNT_API_BASE_URL}/${id}`)
    }

and here is my class:

class Account extends Component {
    constructor(props) {
        super(props);

        this.state = {
            item: {
                id: props.match.params.id,
                name: '',
                email: '',
                password: '',
                link: ''
            }
        };
        this.deleteById = this.deleteById.bind(this);
    }

    componentDidMount() {

        // eslint-disable-next-line
        if (this.state.item.id === -1) {
            return -1
        }

        ApiService.fetchAccountById(this.state.item.id)
            .then(response => this.setState({
                item: {
                    name: response.data.name,
                    email: response.data.email,
                    password: response.data.password,
                    link: response.data.link
                }
            }))
    }


    deleteById(id) {
        ApiService.deleteById(id)
            .then(res => console.log(res.data))
    }

    render() {
        return (
            <div>
                <h3>{this.state.item.name}</h3>
                <ul>
                    {this.state.item.id}
                    <li className={c.itemEmail}>Email: {this.state.item.email}</li>
                    <li>Password: {this.state.item.password}</li>
                    <li>Link: {this.state.item.link}</li>
                </ul>
                <button onClick={this.deleteById(this.state.item.id)}>Delete</button>

            </div>
        )
    }
}

It deletes data after requesting page(get method), but not by clicking delete button.

If I set this.deleteById to <button onClick= to , I receive: 'DELETE http://localhost:8080/api/.../undefined 400'

Upvotes: 1

Views: 561

Answers (2)

0bero
0bero

Reputation: 1062

First, you are removing the id property from you item in componentDidMount:

ApiService.fetchAccountById(this.state.item.id)
            .then(response => this.setState({
                item: { // now item doesn't have id anymore
                    name: response.data.name,
                    email: response.data.email,
                    password: response.data.password,
                    link: response.data.link
                }
            }))

So keep your id like this:

ApiService.fetchAccountById(this.state.item.id)
                .then(response => this.setState({
                    item: {
                        id: this.state.item.id,
                        name: response.data.name,
                        email: response.data.email,
                        password: response.data.password,
                        link: response.data.link
                    }
                }))

Second, you are executing the function instead of passing the function to onClick, change your onClick value to:

onClick={() => {this.deleteById(this.state.item.id)}}

Upvotes: 2

lazy.lizard
lazy.lizard

Reputation: 919

<button onClick={() => this.deleteById(this.state.item.id)}>Delete</button>

Upvotes: 0

Related Questions