Delete is not working in react and firebase

Question

I have created an app where the user data are registered using reactjs in frontend and firebase as a backend. I could save data to firebase. I could edit and delete the data but could not saved edited data to firebase and also my deleteUser event wont remove the deleted node. What might be the reason ?

Here is my code

const userInfo = [
      { id:1, name:'',contact:'',address:'',email:'',username:'',password:'' }
    ];

export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
        userInfo:userInfo
      }
    this.userRef = new Firebase('https://***.firebaseio.com/users/');
    this.createUser = this.createUser.bind(this);
    this.saveUser = this.saveUser.bind(this);
    this.deleteUser = this.deleteUser.bind(this);

  }

  loadData(){
    this.userRef.on('value', snap => {
      let userInfo = [];
      snap.forEach( data => {
        let userData = data.val();
        userData.id = data.name();
        userInfo.push(userData);
      });
      this.setState({ userInfo });
    });

    this.userRef.on('child_removed', (dataSnapshot) =>{
        delete this.state.userInfo[dataSnapshot.key()];
        this.setState({ userInfo: this.state.userInfo });
    });

  }

  componentDidMount(){
    this.loadData();
  }

  createUser(user){
    this.userRef.push(user);
  }

  saveUser(oldUser, newUser){
    console.log('olduser',oldUser);
    console.log('newuser', newUser);
    // TODO - optimize this code
    const foundUser = _.find( this.state.userInfo, user =>
        user.name === oldUser.name
    );
    const foundContact = _.find( this.state.userInfo, user =>
        user.contact === oldUser.contact
    );
    const foundAddress = _.find( this.state.userInfo, user =>
        user.address === oldUser.address
    );
    foundUser.name = newUser.name;
    foundContact.contact = newUser.contact;
    foundAddress.address = newUser.address;
  }

  deleteUser(id){
    console.log(id);
    const dltUserRef = new Firebase('https://***.firebaseio.com/users').child(id);
    console.log('dlt',dltUserRef);
    dltUserRef.remove();
  }

  render() {
    return (
      <div>
        <FormBox createUser = { this.createUser } />
        <UsersList
            userInfo = { this.state.userInfo }
            saveUser = { this.saveUser }
            deleteUser = { this.deleteUser } />
      </div>
    );
  }
}

user-list-item.js

import React, { Component } from 'react';

export default class UserslistItem extends Component {
    constructor(props){
        super(props);

        this.state = { isEditing: false };

        this.onEditClick = this.onEditClick.bind(this);
        this.onCancelClick = this.onCancelClick.bind(this);
        this.onSaveClick = this.onSaveClick.bind(this);
    }

    onEditClick(){
        this.setState({ isEditing: true });
    }

    onCancelClick(){
        this.setState({ isEditing: false });
    }

    onSaveClick(event){
        event.preventDefault();
        const oldUser = [
            {
                name:this.props.name,
                address:this.props.address,
                contact:this.props.contact
            }
         ];
        const newUser = [
            {
                name: this.refs.editName.value,
                address: this.refs.editAddress.value,
                contact: this.refs.editContact.value
             }
        ];
        // console.log('old user is', oldUser);
        // console.log('new user is', newUser);
        this.props.saveUser( ...oldUser, ...newUser );
        this.setState({ isEditing: false });
    }


        return(
                <div className = "buttons">
                    <button className="btn btn-warning" onClick = { this.onEditClick }>Edit</button>
                    <button className="btn btn-danger" onClick = { this.props.deleteUser.bind(this, this.props.id) }>Delete</button>
                </div>
            );

    }

    render() {
        return (
            <div className = "container" >
                <div className="row">
                    <div className="col-md-4">
                        <div className="card card-block">
                             { this.renderUserSection() }
                            { this.renderActionSection() }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

Deleting is working now. But how could i save edited data ?

Answer 1

try:

this.userRef.on('child_removed', (dataSnapshot) => {
  delete this.state.userInfo[dataSnapshot.val().id];
  this.setState({ userInfo: this.state.userInfo });
});