nested map doesnt show results in react-CodePudding

The response data is an array and contains arrays inside, my goal is to loop throuh nested arrays and show the data but it's not showing anything, not sure why

Example of one item in 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: [{…}]

My code

  {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 when missedIngredientCount is above 0 it shows nothing on the screen, I tried testing without that condition but it doesnt help

The part not showing is item.missedIngredients.map

CodePudding user response：

It's because you are not returning from inside the inner map function

 {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) => {
         return (<View>
            <Text>
              {ing.name} ({ing.original})
            </Text>
            <Text>
              Amount: {ing.amount}
              {ing.unitShort}
            </Text>
          </View>;)
        })}
      </View>
     )}
  })}

CodePudding user response：

{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) => {
              return(
              <View>
                <Text>
                  {ing.name} ({ing.original})
                </Text>
                <Text>
                  Amount: {ing.amount}
                  {ing.unitShort}
                </Text>
              </View>;
               )
            })}
          </View>
         )}
  })}

You are not returning from inner map.