How to use delete request with axios in react project and Firebase?

Question

I need to delete the element but don't know how to get that specific element! This is the structure of data on Firebase

And this is the code:

import React, {useState, useEffect} from 'react';
import classes from "./Goal.css";
import Button from "../UI/Button/Button";
import axios from '../../axios-goals'

const Goal = () => {
    const [goal, setGoal] = useState({
        goals: [],
        error: false
    });

    const deleteGoalHandler = (event) => {
        event.preventDefault();

        axios.delete("/goals.json")
            .then(response => {
                console.log(response.data);
            })
            .catch(error => error => {
                setGoal({error: true})
            })
    }

    useEffect(() => {
        axios.get('/goals.json')
            .then(response => {
                const fetchedGoals = [];
                for (let key in response.data) {
                    fetchedGoals.push({
                        ...response.data[key],
                        id: key
                    })
                }
                setGoal({goals: fetchedGoals, error: false})
            })
            .catch(error => {
                setGoal({error: true})
            })
    }, [])

    return (
        <div className={classes.MyGoals}>
            {goal.goals.map(goal => (
                <div key={goal.goalData.goalName} className={classes.Goal}>
                    <h3>{goal.goalData.goalName}</h3>
                    <p style={{fontSize: '13px', color: '#cbcbcb'}}>{goal.goalData.commentToGoal}</p>
                    <div className={classes.GoalDetails}>
                        <p>{goal.goalData.importance}</p>
                        <p>{goal.goalData.timer}</p>
                    </div>
                    <form>
                        <Button btnType="Success">DONE</Button>
                        <Button btnType="Danger" clicked={deleteGoalHandler}>CANCEL</Button>
                    </form>
                </div>
            ))}
        </div>
    );
};

export default Goal;

When you press the cancel button, chosen element must be deleted from Firebase. It seems that my url is wrong because it deletes all the elements.

Answer 1

Since you call:

axios.delete("/goals.json")

Firebase will indeed that node, which means it deletes all of your goals.

If you want it to delete a specific node, you will need to specify the path of that specific node:

axios.delete("/goals/-MRMLoUzCCLA2A3xRWeb.json")

So you'll need to pass the key of the clicked goal to deleteGoalHandler from the HTML, and then pass it to the database goal. Luckily you already store it in the id property for each goal, so it should be something like this in the JSX/HTML:

clicked={deleteGoalHandler(goal.id)}

Answer 2

of course you are deleting the whole document. It has to be:

axios.delete(/goals/${id}.json);

where the id variable has been passed from your goals variable