mardi 19 novembre 2019

how to update state in other component

Hey I'm still new in react natve and I have a custom checkbox wrapper in my react native project

class CheckBoxWrapper extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            checked: false,
            location: ""
        }
    }

    render() {
        return (
            <View style={this.props.style} >
                <CheckBox
                    checkedIcon={this.props.checkedIcon}
                    uncheckedIcon={this.props.uncheckedIcon}
                    checkedColor={this.props.checkedColor}
                    uncheckedColor={this.props.uncheckedColor}
                    textStyle={this.props.textStyle}    
                    containerStyle=
                    size={this.props.size ? this.props.size : normalize(18)}
                    title={this.props.title}
                    checked={this.state.checked }
                    onPress={() => {
                        this.setState({ checked: !this.state.checked }); 
                        this.props.onCheck(this.props.value);
                    }}
                />
            </View>
        );
    }
}

and I called it in a page like this

onEdit(){
    this.setState({checked: false})
  }
  
render(){

return(
<ScrollView contentContainerStyle=>        
                  {
                      this.props.offices.map((item, key) => 
                      <CheckBoxWrapper
                              key={key}
                              title={item.nama_variable} 
                              value={item.kode}
                              checkedIcon={<Image source={img.checkBox.checked} style={styles.checkBox}/>}
                              uncheckedIcon={<Image source={img.checkBox.unchecked} style={styles.checkBox}/>}
                              checked={this.state.checked}  
                              onCheck={this.onItemChecked.bind(this)}
                      )
                  }     
</ScrollView>
              <TouchableOpacity onPress={this.onEdit} style = {styles.button}>
                   <Text style = {styles.buttonText}>Submit</Text>
                </TouchableOpacity>
    )}

and i'm tring to uncheck all checked items in my checkbox when tap on sumbit button, how do I tell the checkboxwrapper component state to set it to false when I call onEdit function. I tried the code above but it didn't work, any one care to help?




Aucun commentaire:

Enregistrer un commentaire