React Native - list from .map() inside a FlatList renderItem?

169 Views Asked by At

I have a list of items which I render in a Flatlist. Each item has a few boolean keys. If the key is true, I want to render a specific icon for that key.

This is the Flatlist code -

<FlatList
        style={styles.list}
        keyExtractor={(item, index) => index.toString()}
        data={currentList}
        renderItem={({ item, index }) => (
          <Pressable style={styles.item} onPress={() => openCard(item, index)}>
            <View style={styles.imageContainer}></View>
            <View style={styles.itemMain}>
              <Text style={[styles.text, { fontSize: 17 }]}>{item.name}</Text>
              <View style={styles.likesContainer}>
                <Text style={styles.text}>{item.likes} likes </Text>
                <Ionicons name={"heart"} size={20} color={"red"} />

                <Text style={styles.text}>{item.visited} visits </Text>
                <Ionicons name={"location"} size={20} color={"gold"} />
              </View>
              <View style={styles.iconsContainer}>
                <Icons beach={item}></Icons>
              </View>
            </View>
          </Pressable>
        )}
      />

This is the Icons component

const Icons = (props) => {
  const beach = props.beach;
  Object.entries(beach).map((entry) => {
    const [key, value] = entry;
    if (value === "TRUE") {
      return icons.selectIcon(key, 20);
       }
    
  });
};

icons.selectIcon is a function which returns the correct icon and works perfectly fine when used outside of a Flatlist. When I tried to return a test instead of the function - Nothing was rendered either.

I think it has to do with trying to render a list within a list but I can't find anything in the documentation.

The other long way solution is to write for each key an if statement.

Can I render a list within a list item? Thanks

Sample object in my object list

[{"img": "soldierspoint", 
"key": 0, 
"lat": 17.16966, 
"likes": 2, 
"lng": -61.83792, 
"longDescription": "Now you can run your build with eas build -p android --profile preview. Remember that you can name the profile whatever you like. We named the profile "preview", however, you can call it "local", "simulator", or whatever makes the most sense for you.
"shortDescription": "Quiet and shady.  Easy Hike.", 
"visited": 2, 
"zAccess": "hike, Car", 
"zAccessDes": "", 
"zHistorical": "", 
"zHistoricalDes": "", 
"zInterestingGeography": "", 
"zInterestingGeographyDes": "",
 "zLotsOfSand": "TRUE", 
"zLotsSandDes": "", 
"zNaturalShade": "TRUE", 
"zNaturalShadeDes": "", 
"zRestaurant": "", 
"zRestaurantDes": "", 
"zSheltered": "", 
"zShelteredDes": "", 
"zSnorkeling": "", 
"zSnorkelingDes": "", 
"zVeryPopular": "", 
"zVeryPopularDes": "", 
"zVerySmall": "", 
"zVerySmallDes": ""}]
0

There are 0 best solutions below