mardi 14 août 2018

react-native-elements checkbox update value

I have the following code and for some reason the checkbox is not updated when I click on them. Does anyone know what might be the problem? I am using CheckBox from react-native-elements. The checked property is based on whether a value exists in a set. The onpress function updates the state variable and I am able to get the correct values from the state variable. Thanks!

  constructor(props) {
    super(props);

    this.state = {
      interests: new Set(),
      brands: new Set(),
      medicalCondition: new Set(),
      errorMessage: '',
      loading: false
    }
  }

  onPressHandler = (event, value, keyName) => {
    let tempCheckedValues = new Set(this.state[keyName]);
    tempCheckedValues.has(value) ? tempCheckedValues.delete(value) : tempCheckedValues.add(value);
    console.log(tempCheckedValues);
    this.setState({[keyName] : tempCheckedValues});
  }

  renderCheckboxGroup = (checkboxList, keyName) => {
    return checkboxList.map((value, index) => {
      return (
          <CheckBox 
            key={index}
            title={value}
            onPress={(event) => this.onPressHandler(event, value, keyName)}
            checked={this.state[keyName].has(value.toLowerCase())}
          />
      )
    })
  }

  render() {
    const interestsConst = ["Tennis", "Golf", "Shopping", "Movie", "Hiking", "Reading", "Diving", "Investing"];
    const brandsConst = ["Chanel", "Louis Vuitton", "H&M", "ZARA", "Hermes", "Gucci", "Cartier", "Burberry", "Nike", "Adidas", "Lululemon", "Athleta"];
    const medicalConditionConst = ["Hypertension", "Hyperlipidemia", "Diabetes", "Back pain", "Anxiety", "Asthma", "Cancer", "Depression", "Shingles"];

    return (
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.cardGroup}>
            <Card title='Interests'>
              {this.renderCheckboxGroup(interestsConst, 'interests')}
            </Card>
          </View>
          <View style={styles.cardGroup}>
            <Card title='Brands'>
              {this.renderCheckboxGroup(brandsConst, 'brands')}
            </Card>
          </View>
          <View style={styles.cardGroup}>
            <Card title='Medical Conditions'>
              {this.renderCheckboxGroup(medicalConditionConst, 'medicalCondition')}
            </Card>
          </View>
        </ScrollView>
      </View>
    )
  }
}




Aucun commentaire:

Enregistrer un commentaire