I have a mobile practice application which I am developing with React Native that allows you to add notes and upload them to Firebase. I can currently bring and add notes from Firebase to my app. I am very beginner and I am having problems to eliminate notes. I need to know what I'm doing wrong when trying to delete a note and how I can solve it. I tried many ways and there is no case. I enclose the code:
import React from 'react';
import {
StyleSheet,
View,
Text,
TextInput,
ScrollView,
TouchableOpacity
} from 'react-native';
import Notita from './componentes/Notita';
import firebase from 'firebase';
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);
};
render() {
// Recorro el array de notitas y retorno una Notita
let show_notitas = this.state.all_notitas.map((val, key) => {
return (
<Notita
key={key}
keyval={key}
val={val}
eventDeleteNotita={()=>this.deleteNotita(key)}>
</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>
);
}
The problem is here, if I print the value of the key parameter it returns a number like 0, 1, 2, etc., and what actually should happen is the key of the note, which would have a format like -LRtghw8CjMsftSAXMUg or something like that.
deleteNotita(key) {
/*
Borrar una notita. Requiere key/id de la notita.
Se hizo esta función para borrar
una notita del array de notitas en el estado.
Se le pasa una key o id y la cantidad de elementos,
en este caso, uno. Luego se refresca el estado.
*/
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}); // Refrescar estado
} // deleteNotita
I do not know how to go through the real key and not a number how is it happening now? I have the feeling that the error is here:
// Recorro el array de notitas y retorno una Notita
let show_notitas = this.state.all_notitas.map((val, key) => {
return (
<Notita
key={key}
keyval={key}
val={val}
eventDeleteNotita={()=>this.deleteNotita(key)}> // JUSTO AQUI
</Notita>
);
});