Postingan lainnya
Membuat tombol Edit dengan firebase react native
bagaimana cara membuat fungsi edit agar key dari firebase bisa terhubung dari file User.js ke EditUser.js
ini User.js
class User extends Component {
constructor(props) {
super(props);
this.state = {
tes : {},
userkey : [],
};
}
componentDidMount(){
database()
.ref('users')
.once('value', (snapshot) => {
let data = snapshot.val() ? snapshot.val() : {};
let usertes = {...data};
this.setState({
tes : usertes,
userkey : Object.keys(usertes)
})
})
}
goToEdit = () => {
this.props.navigation.navigate('Edit User')
}
render() {
const {tes, userkey} = this.state
return (
<View >
{userkey.length > 0 ? (
userkey.map((key) => (
<View style={styles.box}>
<Image style={styles.image} source={{uri: tes[key].uri}} />
<View style={styles.boxContent}>
<Text key={key} style={styles.title}>{tes[key].nama}</Text>
<Text style={styles.description}>{tes[key].gender} / {tes[key].umur} Tahun</Text>
</View>
<TouchableOpacity style={[styles.button, styles.view]} onPress={this.goToEdit}>
<Image style={styles.icon} source={require('../../assets/edit.png')}/>
</TouchableOpacity>
</View>
))
) :(<Text>Kosong</Text>)}
</View>
);
}}
ini EditUser.js
constructor(props){
super(props)
this.state = ({
nama : '',
gender: '',
umur : '',
status:'',
tes : {},
userkey : []
})
}
componentDidMount(){
database()
.ref('users' )
.once('value', (snapshot) => {
let data = snapshot.val() ? snapshot.val() : {};
let useritem = {...data};
this.setState({
nama : useritem.nama,
gender: useritem.gender,
umur : useritem.umur,
status : useritem.status
})
})
}
updateFunction(){
if(this.prosesupdate){
database()
.ref('users/'+ this.userkey)
.update({
nama : this.state.nama,
gender : this.state.gender,
umur : this.state.umur,
status : this.state.status
})
.then(() => console.log('Data updated.'));
}
}
render() {
console.log(id)
return (
<View style={styles.container}>
<KeyboardAwareScrollView
style={{flex: 1, width: '100%'}}
keyboardShouldPersistTaps="always">
<TextInput
style={styles.input}
placeholder="Nama"
placeholderTextColor="#aaaaaa"
underlineColorAndroid="transparent"
autoCapitalize="none"
onChangeText = {(nama)=> this.setState({nama})}
/>
<Picker
selectedValue={this.state.gender}
style={styles.input}
onValueChange={(itemValue, itemIndex) =>
this.setState({ gender: itemValue })
}
underlineColorAndroid="transparent"
autoCapitalize="none">
<Picker.Item label="Pilih Gender" value=" " color="#aaaaaa"/>
<Picker.Item label="Male" value="male" />
<Picker.Item label="Female" value="female" />
</Picker>
<TextInput
style={styles.input}
placeholder="Umur"
placeholderTextColor="#aaaaaa"
underlineColorAndroid="transparent"
autoCapitalize="none"
onChangeText = {(umur)=> this.setState({umur})}
/>
<Picker
selectedValue={this.state.status}
style={styles.input}
onValueChange={(itemValue, itemIndex) =>
this.setState({ status: itemValue })
}
underlineColorAndroid="transparent"
autoCapitalize="none">
<Picker.Item label="Status" value=" " color="#aaaaaa"/>
<Picker.Item label="Single" value="single" />
<Picker.Item label="Married" value="married" />
</Picker>
<TouchableOpacity
onPress = {()=>this.updateFunction()}
style={styles.button}>
<Text style={styles.buttonTitle}>Update</Text>
</TouchableOpacity>
</KeyboardAwareScrollView>
</View>
)
}
}
0
Belum ada Jawaban. Jadi yang pertama Jawaban
Login untuk ikut Jawaban