javascript - Remove data in React Firebase application - Stack Overflow

I have this following code for import user data from Firebase to my React application :

import React from 'react';
import AuthUserContext from './AuthUserContext';
import withAuthorization from './withAuthorization';
import * as firebase from 'firebase';
import { config, database, db, auth, itembase, } from 
'../firebase/firebase';

class Collection extends React.Component {
constructor (props) {
  super(props)
  this.state = {
    collection: []
  };

}

//Data from Firebase Database
ponentDidMount() {
  var userUid = firebase.auth().currentUser.uid;
  const collection = firebase.database().ref(`/users/${userUid}/collection/`)

  collection.on('value', snapshot => {
    this.setState({
      collection: snapshot.val(),
    })
  })
}

//Remove from user collection
removeToCollection(key, e) {
  const userUid = firebase.auth().currentUser.uid;
  const item = {
    nom: this.state.collection[key].nom,
    parution: this.state.collection[key].parution
  };
  firebase.database().ref(`users/${userUid}/collection/`).remove(item)

 }

render(){
  const collection= Object.keys(this.state.collection).map(key => {
    return (
      <div key={key}>
        <h3>{this.state.collection[key].nom}</h3>
        <p>{this.state.collection[key].parution}</p>
        <button className="btn btn-danger" onClick={this.removeToCollection.bind(this, key)}>Remove</button> </div>
        )
      });
    return (
      <div>
        {collection}
      </div>
    )
 }

}

const authCondition = (authUser) => !!authUser;

export default withAuthorization(authCondition)(Collection);

Like you can see, I have a function for remove data when the user click on the remove button. My problem is that when I click the button, I get an error message that appears

And here is what my database looks like:

Thank a lot in advance for your help !

I have this following code for import user data from Firebase to my React application :

import React from 'react';
import AuthUserContext from './AuthUserContext';
import withAuthorization from './withAuthorization';
import * as firebase from 'firebase';
import { config, database, db, auth, itembase, } from 
'../firebase/firebase';

class Collection extends React.Component {
constructor (props) {
  super(props)
  this.state = {
    collection: []
  };

}

//Data from Firebase Database
ponentDidMount() {
  var userUid = firebase.auth().currentUser.uid;
  const collection = firebase.database().ref(`/users/${userUid}/collection/`)

  collection.on('value', snapshot => {
    this.setState({
      collection: snapshot.val(),
    })
  })
}

//Remove from user collection
removeToCollection(key, e) {
  const userUid = firebase.auth().currentUser.uid;
  const item = {
    nom: this.state.collection[key].nom,
    parution: this.state.collection[key].parution
  };
  firebase.database().ref(`users/${userUid}/collection/`).remove(item)

 }

render(){
  const collection= Object.keys(this.state.collection).map(key => {
    return (
      <div key={key}>
        <h3>{this.state.collection[key].nom}</h3>
        <p>{this.state.collection[key].parution}</p>
        <button className="btn btn-danger" onClick={this.removeToCollection.bind(this, key)}>Remove</button> </div>
        )
      });
    return (
      <div>
        {collection}
      </div>
    )
 }

}

const authCondition = (authUser) => !!authUser;

export default withAuthorization(authCondition)(Collection);

Like you can see, I have a function for remove data when the user click on the remove button. My problem is that when I click the button, I get an error message that appears

And here is what my database looks like:

Thank a lot in advance for your help !

• javascript
• reactjs
• firebase
• firebase-realtime-database

Share Improve this question Follow edited Aug 1, 2018 at 13:49 Frank van Puffelen 601k8585 gold badges890890 silver badges860860 bronze badges asked Aug 1, 2018 at 11:14 LittleBigBoyLittleBigBoy 29522 gold badges55 silver badges99 bronze badges 5

• firebase.database().ref(/users/${userUid}/collection/).set(null); – Shubham Agarwal Bhewanewala Commented Aug 1, 2018 at 11:40
• Hello Shubham Agarwal Bhewanewala and thank you for your help. I did what you told me but now the function delete all the data from "collection" and I would like delete just the data corresponding of the key of the item collection. – LittleBigBoy Commented Aug 1, 2018 at 13:03
• And I have an error message : "TypeError: Cannot convert undefined or null to object" – LittleBigBoy Commented Aug 1, 2018 at 13:11
• I gave you an example of deleting nodes. You should try to look for answer using a suggestion given if it shows some result – Shubham Agarwal Bhewanewala Commented Aug 1, 2018 at 16:18
• In the ref(put_your_exact_url).. suppose inside collection of first object you want to delete first element then pass /users/${userUid}/collection/${objectKey}/ to your ref and set it to null and this will do your job – Shubham Agarwal Bhewanewala Commented Aug 1, 2018 at 16:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

The error es from:

firebase.database().ref(`users/${userUid}/collection/`).remove(item)

It looks like you're trying to pass in the item to remove. That's not how the remove method works.

The remove method removes all data at the location you call it on. If you pass in a parameter to remove, Firebase expects that parameter to be a callback function that it calls after the delete pletes (or fails).

So you'll need to create the plete path to the item to remove:

let key = "-LlouZxkW1N3Llt6h5nm"
firebase.database().ref(`users/${userUid}/collection/${key}`).remove()

If you don't know the key of the item to remove, you will first need to execute a query to find that item and determine its key.