Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja

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

Dipost 3 tahun yang lalu

Belum ada Jawaban. Jadi yang pertama Jawaban

Login untuk ikut Jawaban