Nothing happens when I click my button in React/Firebase App

Question

I have a "add to favorite" system on my app where every user can save item in a private list named "My Collection". Everything worked fine until I wanted to add the ranking in alphabetical order.

Each "favorite item" of the user is visible in the page, in alphabetical order, but when i click on my "delete button", nothing is happening. I do not really understand where the problem might come from.

This is my code (I use React and Firebase):

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';
import Image from 'react-image-resizer';
import _ from 'lodash';



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

}




//Data from Firebase Database
componentDidMount() {
  database.once('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      var childKey = childSnapshot.key;
      var childData = childSnapshot.val();

    });
  });

  const userUid = firebase.auth().currentUser.uid;
  const userRef = firebase.database().ref(`users/${userUid}/collection/items`).orderByChild(`marque`);

    userRef.on('value', (snapshot) => {
      let newState = [];

      snapshot.forEach(function(childSnapshot) {
        newState.push({
          id: childSnapshot.key,
          marque: childSnapshot.val().marque,
          marquesuite: childSnapshot.val().marquesuite,
          numero: childSnapshot.val().numero,
          reference: childSnapshot.val().reference,
          cote: childSnapshot.val().cote,
          avatar: childSnapshot.val().avatar,
          avatarURL: childSnapshot.val().avatarURL,

        });
      });

      this.setState ({
        collection: newState
      });
    });
  }

//Remove from user collection
removeToCollection(key, e) {
  const userUid = firebase.auth().currentUser.uid;
  const item = key;

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

 renderPosts() {
 this.removeToCollection = this.removeToCollection.bind(this);
 return _.map(this.state.collection, (collection, key) => {
   return (
     <div className="item col-md-3" key={key} id={key}>
         <img src={this.state.collection[key].avatarURL} height={150} with={150}/>
         <h3>{collection.marque}</h3>
         <h3>{collection.numero}</h3>
         <h4>{collection.marquesuite}</h4>
         <h4>{collection.reference}</h4>
         <p>{collection.cote}</p>
         <div className="text-center">
         <button className="btn btn-danger" onClick={(e) => {if(window.confirm('Voulez vous vraiment retirer cette capsule de votre collection ?')){this.removeToCollection(key, e)};}}>Supprimer</button>
         </div>

     </div>
   )
 })
}

render(){
  if(this.state.collection === null){
    return <h2>Votre collection est vide</h2>
  }
    return (
      <div class="container-fluid">
        <h1 class="text-center">Votre collection</h1>
        {this.renderPosts()}
      </div>
    )
 }

}

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

export default withAuthorization(authCondition)(Collection);

Thank you in advance for your help !

Answer 1

I would recommend binding removeToCollection() in the constructor or using arrow functions first, but for your question, try updating the state when you remove from the database, not just when you add to it.

EDIT: Wait, I just realized that the .on() function gets called when the childs change, so it should already update the state on deletion too, my mistake.