My objective is to loop through nested arrays in the response data, which is an array containing other arrays. However, I am encountering an issue where the data is not being displayed for some reason.
Here is an example of one item in the response:
id: 548058
image: "https://testing.com/recipeImages/548058-312x231.jpg"
imageType: "jpg"
likes: 1655
missedIngredientCount: 2
missedIngredients: Array(2)
0: {id: 1089003, amount: 1, unit: 'small', unitLong: 'small', unitShort: 'small', …}
1: {id: 98940, amount: 4, unit: '', unitLong: '', unitShort: '', …}
length: 2
[[Prototype]]: Array(0)
title: "Brie and Apple Panini – 6 Points"
unusedIngredients: []
usedIngredientCount: 1
usedIngredients: [{…}]
Below is the code I have written:
{recipes.map((item) => {
return (
<View key={item.id} style={styles.recipe}>
<Image source={{ uri: item.image }} style={styles.img} />
<Text style={styles.bold}>{item.title}</Text>
<Text>Missing ingredients: {item.missedIngredientCount}</Text>
{item.missedIngredientCount > 0 && (
<View>
{item.missedIngredients.map((ing) => {
<View>
<Text>
{ing.name} ({ing.original})
</Text>
<Text>
Amount: {ing.amount}
{ing.unitShort}
</Text>
</View>;
})}
</View>
)}
})}
Even though missedIngredientCount is greater than 0, nothing is displaying on the screen. I have tried removing the condition without success.
The part that is not showing is item.missedIngredients.map.