CODEWITHSUNDEEP
javascriptfirebasereact-nativefirebase-realtime-database
Javier Pugliese
Javier Pugliese

Reputation: 23

Delete Item by Key, Firebase React Native

I have a simple Notes React Native app and I am able to add and get data to it, but I am not sure how to remove/update data. The main problem is in getting the part where I tell firebase which data to remove. How can I pass a firebase key to a 'delete' function that takes the key as parameter and remove it from firebase. I'm an absolute beginner at React Native, my code is the following:

export default class App extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    all_notitas: [],
    notita_text: ''
  };
};

componentWillMount() {
  const notitasRef = firebase.database().ref('notitas');
  this.listenForNotitas(notitasRef);
};

listenForNotitas = (notitasRef) => {
  notitasRef.on('value', (dataSnapshot) => {
    var aux = [];
    dataSnapshot.forEach((child) => {
      aux.push({
        date: child.val().date,
        notita: child.val().notita
      });
    });
    this.setState({all_notitas: aux});
  });
};  // listenForNotitas

render() {
  let show_notitas = this.state.all_notitas.map((val, key) => {
    return (
      <Notita
        key={key}
        keyval={key}
        val={val}
        eventDeleteNotita={()=>this.deleteNotita(key)}> // I THINK THIS IS THE PROBLEM
      </Notita>
    );
  });

  return (
    <View style={styles.container}>

      <View style={styles.header}>
        <Text style={styles.headerText}>NOTITAS</Text>
      </View>

      <ScrollView style={styles.scrollContainer}>
        {show_notitas}
      </ScrollView>

      <View style={styles.footer}>
        <TouchableOpacity
          style={styles.addButton}
          onPress={this.addNotita.bind(this)}>
          <Text style={styles.addButtonText}>+</Text>
        </TouchableOpacity>

        <TextInput
          style={styles.textInput}
          placeholder='>>> Escribir notita'
          placeholderTextColor='white'
          underlineColorAndroid='transparent'
          onChangeText={(notita_text) => (this.setState({notita_text}))}
          value={this.state.notita_text}>

        </TextInput>
      </View>

    </View>
  );
}

addNotita() {
  if (this.state.notita_text) {
    var d = new Date();
    dataForPush = {
      'date': d.getDate() + '-' +  d.getMonth() + '-' + d.getFullYear(),
      'notita': this.state.notita_text
    };
    firebase.database().ref('notitas').push(dataForPush);
    this.state.all_notitas.push(dataForPush);
    this.setState(
      {
        all_notitas: this.state.all_notitas,
        notita_text: '',  // Limpiar input
      }
    )
  }  // end if
}  // addNotita

When I do 'console.log(key)', it returns an int like 0, 1, 2, etc. It should return a firebase key like '-LRtghw8CjMsftSAXMUg' for example. I don't know what I am doing wrong and how to fix it.

deleteNotita(key) {
  firebase.database().ref('notitas').child('' + key).remove()

  /*
  let updates = {};
  console.log(key);
  console.log(updates['/notitas/' + key]);
  updates['/notitas/' + key] = null;
  firebase.database().ref().update(updates); */

  this.state.all_notitas.splice(key, 1);
  this.setState({all_notitas: this.state.all_notitas});
} // deleteNotita

}

Upvotes: 0

Views: 3952

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598728

You're dropping the key from Firebase when you're adding the notes to aux. The solution is to also keep the key from Firebase in there:

notitasRef.on('value', (dataSnapshot) => {
  var aux = [];
  dataSnapshot.forEach((child) => {
    aux.push({
      date: child.val().date,
      notita: child.val().notita,
      id: child.key
    });
  });
  this.setState({all_notitas: aux});
}

And then pass that value to deleteNotita with:

this.deleteNotita(val.id)

Upvotes: 1

Related Questions