I’ve got that object :
foodDatas: {
"_id": "603cf063c9f3a13528634bab",
"description": "petit déjeuner parisien local sur l'ile",
"hotel": "603cd6ae5206ad4f04296218",
"nameArticle": "Parisien",
"prix": 15,
"type": "PetitDejeuner",
"detail": [
{ "pastries": ["croissant","pain au chocolat"] },
{ "drinks": ["café","thé"] },
{ "fromages": ["kiri", "camembert"] },
],
}
What I want to do is to map through detail array to display each element of the value of the objects that contains each of its elements.
In others terms, I want to make a list like below
pastries:
- croissant
- pain au chocolat
drinks:
- café
- thé
fromages:
- kiri
- camemebert
I’ve tried this :
{Object.keys(foodDatas.detail).map((category, i) => {
return (
<>
<Text style={styles.category}>{category}</Text>
// From here I want to map through category to display its content**
<View style={styles.choices}>
<View style={styles.options}>
<TextInput
style={styles.input}
onChangeText={handleChange("croissant")}
placeholder={"1"}
keyboardType={'numeric'}
value={values.croissant}
/>
<Text style={styles.itemOption}>Croissant</Text>
</View>
</View>
</>
)
})}
But I didn’t get the name of the categories (pastries, fromages, etc.), instead I’ve got their index (0,1, etc.). Also, I don’t know how to retrieve the value of each category ( croissant, pain au chocolat, café, etc.)
Thank for any help you can give
Answer
To first address why you’re getting the index, it’s because you’re using Object.keys() on an array (foodDatas.detail is an array not an object).
To get your current implementation working, you’ll need to do something like:
return foodDatas.detail.map((categoryObj) => (
Object.keys(categoryObj).map((category) => (
<>
<Text style={styles.category}>{category}</Text>
{categoryObj[category].map((entry) => (
<View style={styles.choices}>
<View style={styles.options}>
<TextInput
style={styles.input}
onChangeText={handleChange(entry)}
placeholder={"1"}
keyboardType={'numeric'}
value={entry}
/>
<Text style={styles.itemOption}>{entry}</Text>
</View>
</View>
))}
</>
));
));