mercredi 2 octobre 2019

How to handle multiple checkboxes

I am working on a project in which I need to filter results on the basis of checked items. I want to select one or more than one item from different categories and also want to consol.log(...) selected items by clicking on the Apply button to know which items have been selected. Here is the screenshot of screen

enter image description here

Here is my code

const { allergens, cuisine, deliveries, dietagges, environments, services } = this.state.data;

      <View style={styles.sliderContainer}>
        {allergens !== null && allergens !== undefined ? (
          <View>
            <Text style={styles.sliderLabel}>Allergens:</Text>
            {allergens.map((item, index) => {
              return (
                <View style={styles.checkBoxContainer} key={index}>
                  <Text style=>
                    {item && item[0]}{" "}
                    <Text style=>
                      ({item && item[1]})
                    </Text>
                  </Text>
                  <CheckBox
                        checked={false}
                        onPress={() => this.handleValueChange()}
                  />
                </View>
              );
            })}
          </View>
        ) : null}
      </View>
<View style={styles.sliderContainer}>
            {environments !== null && environments !== undefined ? (
              <View>
                <Text style={styles.sliderLabel}>Environments:</Text>
                {environments.map((item, index) => {
                  return (
                    <View style={styles.checkBoxContainer} key={index}>
                      <Text style=>
                        {item && item[0]}{" "}
                        <Text style=>
                          ({item && item[1]})
                        </Text>
                      </Text>
                      <CheckBox
                        checked={false}
                        onPress={() => this.handleValueChange()}
                      />
                    </View>
                  );
                })}
              </View>
            ) : null}
          </View>
          <View style={styles.sliderContainer}>
            {cuisine !== null && cuisine !== undefined ? (
              <View>
                <Text style={styles.sliderLabel}>Cuisine:</Text>
                {cuisine.map((item, index) => {
                  return (
                    <View style={styles.checkBoxContainer} key={index}>
                      <Text style=>
                        {item && item[0]}{" "}
                        <Text style=>
                          ({item && item[1]})
                        </Text>
                      </Text>
                      <CheckBox
                        checked={false}
                        onPress={() => this.handleValueChange()}
                      />
                    </View>
                  );
                })}
              </View>
            ) : null}
          </View>

And here is the data coming from API

"cuisine": [
                    [
                        "Middle Eastern",
                        4
                    ],
                    [
                        "Western",
                        4
                    ],
                    [
                        "Pasta Dishes",
                        2
                    ],
                    [
                        "Salad",
                        2
                    ],
                    [
                        "Mexican",
                        1
                    ],
                    [
                        "Soup",
                        1
                    ],
                    [
                        "snacks",
                        1
                    ]
                ],
                "allergens": [
                    [
                        "Halal",
                        14
                    ]
                ],
                "environments": [
                    [
                        "Mexican",
                        15
                    ]
                ],

How to select or unselect items without affecting others? Thanks in advance.




Aucun commentaire:

Enregistrer un commentaire