How to implement DELETE method in axios and React?

Question

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'

0bero · Accepted Answer · 2020-01-26 16:47:54Z

2

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)}}

edited Jan 26, 2020 at 16:47

answered Jan 26, 2020 at 16:40

0bero

1,0641 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

andrew17 Over a year ago

no it doesnt work, says /api/.../undefined instead of /api/.../23

0bero Over a year ago

You are also removing the id from item in componentDidMount, that's why this.state.item.id is undefined, I modified the answer, check it out.

andrew17 Over a year ago

How could I update state(if its about state), because after delete button I redirecting to other URL, and there i still see old data and only after refresh page it changes?

Garrett Motzner Over a year ago

@andrew17 is your <button> inside a <form> tag? If so, the button may be acting like a submit button and triggering the form. You probably want to set the type of the <button> to type="button" so that it doesn't act like a submit.

Garrett Motzner Over a year ago

One thing on the id being in the state and the props: if the id sent to the props ever changed, because most of the time you are relying on the ID in state, then you might end up with a bug here. It's probably best to always use the ID from props, and not store it in the state, unless you expect that id to change, but then you probably need to change the ID at the higher level as well. Also, the key probably should be the ID. If this is the case, then if the id changes, a new instance of the component will be made (which accidentally fixes the bug).

lazy.lizard · Accepted Answer · 2020-01-26 16:40:10Z

0

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

answered Jan 26, 2020 at 16:40

lazy.lizard

9296 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to implement DELETE method in axios and React?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related