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