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>
        )
    }
}




avatar yossa

@yossa

8 Kontribusi 1 Poin


Jawaban

Belum ada Jawaban, jadi yang pertama

Login untuk gabung berdiskusi