Mapping of Conditional Rendering in React Native

Question

I have a component in React Native that involves a map and markers that corresponds to certain locations. Some markers have multiple items/images that are supposed to render, while others have one or none. I can make it render on each of the markers but I can't get my items to render on a marker when there are multiple.

If I run a console log, location 105 for example with have 5 in the array, 4 at location 104, location 101 will have 1, and 106 will have 0. I want to make it so that it will return a 5 logos in 105, 4 at 104 1 in 101, etc.

Currently I can get it to return the text of Hello at each of locations, but this is not what I'm trying to do. I'm having trouble with the conditional mapping.

 addSupporters(markerLocation, teamImages){ var teamLogos = [] for (i = 0; i < this.props.supportersGroups.MLS.length; i++) { if (this.props.supportersGroups.MLS[i].homebar == markerLocation.MapMarker.id){ teamLogos.push(this.props.supportersGroups.MLS[i]) return( <View> <Text>{this.props.supportersGroups.MLS[i].name}</Text> <Image style={{width: 25, height: 25}} source={teamImages[this.props.supportersGroups.MLS[i].id]} /> </View> ) } } } 

Currently it will render the first item that meets the condition, but I would like it to render all of the items that meet the condition. So whenever the this.props.supportersGroups.MLS[i].homebar is equal to the markerLocation.MapMarker.id it adds them to the teamLogos array and then the array is mapped. So if there are 3 locations that meet the array, then it will look like this for this specific markerLocation:

  <View> <Text>{this.props.supportersGroups.MLS[0].name}</Text> <Image style={{width: 25, height: 25}} source={teamImages[this.props.supportersGroups.MLS[0].id]} /> <Text>{this.props.supportersGroups.MLS[4].name}</Text> <Image style={{width: 25, height: 25}} source={teamImages[this.props.supportersGroups.MLS[4].id]} /> <Text>{this.props.supportersGroups.MLS[6].name}</Text> <Image style={{width: 25, height: 25}} source={teamImages[this.props.supportersGroups.MLS[6].id]} /> </View> 

Answer 1

When we call addSupporters() can return an object which satisfies has values of this.props.supportersGroups.MLS where Groups.MLS[i].homebar is equal to the markerLocation.MapMarker.id and pass this array to be displayed. For that change your addSupporters function as,

addSupporters(markerLocation, teamImages){
    var teamLogos = []
    this.props.supportersGroups.MLS.filter((mls)=>mls.homebar == markerLocation.MapMarker.id)
      }     
    }
    return teamLogos;
  }

and in render call the addSupporters() with correct parameters and,

render(){
let teamLogos = addSupporters(markerLocation, teamImages)
return(
...
{
   teamLogos.map((logo)=><View>
        <Text>{logo.name}</Text>
        <Image
          style={{width: 25, height: 25}}
          source={logo.id]}
        />
      </View>)
}