Remove Transaction with a certain ID in Firebase database - reactjs

Question

How do I remove the transaction with a certain ID it includes data like name, company, position etc., as shown in the code and image below. It is saved in firebase database and I want a certain transaction completely removed. I cant figure out how to remove I tried `
deleteItem(key){
const filteredItems = this.state.items.filter(item =>
item.key!==key);
this.setState({
items:filteredItems
})
}
but its not working
import React, { Component } from 'react';
import fire from '../../config/Fire';
import Transaction from './Transaction/Transaction';
class Tracker extends Component {
state = {
transactions: [],
name: '',
company: '',
position: '',
link: '',
currentUID: fire.auth().currentUser.uid
}
handleChange = input => e => {
this.setState({
[input]: e.target.value !=="0" ? e.target.value : ""
});
}
// add transaction
addNewTransaction = () => {
const {name, company, position, link, currentUID} = this.state;
// validation
if(name && company && position && link){
const BackUpState = this.state.transactions;
BackUpState.push({
id: BackUpState.length + 1,
name: name,
company: company,
position: position,
link: link,
user_id: currentUID
});
fire.database().ref('Transactions/' + currentUID).push({
id: BackUpState.length,
name: name,
company: company,
position: position,
link: link,
user_id: currentUID
}).then((data) => {
//success callback
console.log('success callback');
this.setState({
transactions: BackUpState,
name: '',
company: '',
position: '',
link: ''
})
}).catch((error)=>{
//error callback
console.log('error ' , error)
});
}
}
componentWillMount(){
const {currentUID} = this.state;
const BackUpState = this.state.transactions;
fire.database().ref('Transactions/' + currentUID).once('value',
(snapshot) => {
// console.log(snapshot);
snapshot.forEach((childSnapshot) => {
BackUpState.push({
id: childSnapshot.val().id,
name: childSnapshot.val().name,
company: childSnapshot.val().company,
position: childSnapshot.val().position,
link: childSnapshot.val().link,
user_id: childSnapshot.val().user_id
});
// console.log(childSnapshot.val().name);
});
this.setState({
transactions: BackUpState,
});
});
}
render(){
var currentUser = fire.auth().currentUser;
return(
<div className="newTransactionBlock">
<div className="newTransaction">
<form>
<input
onChange={this.handleChange('name')}
value={this.state.name}
placeholder="Name"
type="text"
name="name"
/>
<div className="inputGroup">
<input
onChange={this.handleChange('company')}
value={this.state.company}
placeholder="Company"
type="text"
name="company"
/>
<input
onChange={this.handleChange('position')}
value={this.state.position}
placeholder="Position"
type="text"
name="position"
/>
<input
onChange={this.handleChange('link')}
value={this.state.link}
placeholder="Link"
type="url"
name="link"
/>
</div>
</form>
<button onClick={() => this.addNewTransaction()} className="addTransaction">+ Add Transaction</button>
</div>
</div>
<div className="latestTransactions">
<p>Latest Transactions</p>
<ul>
{
Object.keys(this.state.transactions).map((id) => (
<Transaction key={id}
name={this.state.transactions[id].name}
company={this.state.transactions[id].company}
position={this.state.transactions[id].position}
link={this.state.transactions[id].link}
/>
))
}
</ul>
</div>
</div>
);
}
}
export default Tracker;
Here is the transaction List imported
import React from 'react';
const Transaction = props => {
return (
<li>
<div>{props.name}</div>
<div>{props.company}</div>
<div>{props.position}</div>
<div>{props.link}</div>
<button>remove</button>
</li>
);
}
export default Transaction;