React Native - Map function inside of another map function?

Question

I have this array of data that have 4 objects, and after selecting manually one of this, I don't know how to get all the information inside. For example I want all the data that is inside 'pois' (another array)...I was thinking that should be something like this:

{api.monuments.map((monumento, index) => (
    {monumento.pois.map((poi, index2) => (
        <TouchableHighlight
            onPress={() => this.onClick(convento)}
            style={styles.monumentoContainer}
            key={index2}
        >
            <Image style={styles.monumentoPic} source={{uri:'http://192.168.56.1:3000/'+poi.image}}>
                <View style={styles.monumentoTitleContainer}>
                    <Text style={styles.monumentoTitle}>{poi.name}</Text>
                                </View>
            </Image>
        </TouchableHighlight>
    ))}
))}

But it's not - image of the error, so how can I do it?

Another question is: since I have an array with 4 objects, and each one have a specific category, how can I select only the object that have the 'category' == 'xxxxx'?

Hope you can help me! Thank you

Answer 1

You can do it as follows:

var api = [
            { 
              category: "Cat_name",
              monuments: [
                            {
                              item: 'item1',
                              pois: [
                                      {name: 'poi1'},
                                      {name: 'poi2'},
                                      {name: 'poi3'},
                                      {name: 'poi4'}
                              ]
                            }
              ]
           },
           { 
             category: "Cat_name1",
             monuments: [
                          {
                            item: 'item2',
                            pois: [
                                   {name: 'poi5'},
                                   {name: 'poi6'},
                                   {name: 'poi7'},
                                   {name: 'poi8'}
                            ]
                          }
            ]
          }
]

To get all pois you can do something as follows:

{api.map(i => i.monuments.map(j => j.pois.map(k => k.name)))}

And if you want to check for category name you can do something like:

{data.map(i => {
     if (i.category === "Cat_name1"){
        return i.monuments.map(j => j.pois.map(k => k.name))
     }              
})}

Here is fiddle.