CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-realtime-database
Matt Brown
Matt Brown

Reputation: 11

How to delete single item from realtime Firebase in react app?

can someone help me how I can make to delete a single item from realtime database using remove() function following this code? It say's that 'id' is not defined Thanks )

import { expensesRef } from '../firebase';

const ExpenseItem = (props) => {

    const handleDeleteExpense = (id) => {
        
        expensesRef.child(`expenses/` + id).remove();
    };

    return (
        <li class='list-group-item d-flex justify-content-between align-items-center'>
            {props.name}
            <div>
                <span class='badge badge-success mr-3'>{props.priority}</span>
                <span class='badge badge-info mr-3'>{props.cost} Lei</span>
                <TiDelete size='1.5em' onClick={handleDeleteExpense(`${id}`)} />
            </div>
        </li>
    );
};

export default ExpenseItem;

Here is how my database looks

Upvotes: 0

Views: 858

Answers (1)

samthecodingman
samthecodingman

Reputation: 26296

For the sake of explanation, I'm going to remove the handleDeleteExpense function from your code, leaving it with:

const ExpenseItem = (props) => {
    return (
        <li class='list-group-item d-flex justify-content-between align-items-center'>
            {props.name}
            <div>
                <span class='badge badge-success mr-3'>{props.priority}</span>
                <span class='badge badge-info mr-3'>{props.cost} Lei</span>
                <TiDelete size='1.5em' onClick={handleDeleteExpense(`${id}`)} />
            </div>
        </li>
    );
};

You see here that, the only spot referencing id is in the TiDelete component. Most likely, you intended id to be set by the parent component like you are doing for name, priority and cost. So you need to change id to props.id.

Then in the parent component, you'd add it using something similar to:

const { name, priority, cost } = ref.val();
<ExpenseItem
  id=snapshot.key
  name=name
  priority=priority
  cost=cost
/>

or the shorter

<ExpenseItem
  { ...snapshot.val() }
  id=snapshot.key
/>

It's important to note that the snapshot's key, not your id inside your data, is what is being passed through. If you used the other ID, the handleDeleteExpense isn't going to work.

Next, this line, will cause your data to be deleted as soon as your component renders because you are calling the function straight away:

<TiDelete size='1.5em' onClick={handleDeleteExpense(`${id}`)} />

Instead it should be:

<TiDelete size='1.5em' onClick={() => handleDeleteExpense(`${id}`)} />

You also import a reference called expensesRef, which I assume has been initialized with firebase.database().child('expenses'). This means your delete instruction is also deleting expenses/expenses/<id> instead of expenses/<id>.

Upvotes: 1

Related Questions