title: Mapping through an Array of Images created in a local JSON File and rendering it
body: <p>I am learning RN and I am having trouble setting up a mapping method to go through an array of images of some players  that I created in a local JSON file, and render them in their respective profile pages. </p>
  
  <p>This is how I have set  my json.</p>
  
  <pre><code>//PlayerImages.js    
  const PlayerImages = [
                {
                    id: "1",
                    name: "Cristiano Ronaldo",
                    images:["https://www.thesun.co.uk/wp-content/uploads/2019/05/NINTCHDBPICT000485852530.jpg",
                      "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg",
                      "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg"]
                  },
                  {
                    id: "2",
                    name: "Lionel Messi",
                    images:["https://www.thesun.co.uk/wp-content/uploads/2019/05/NINTCHDBPICT000485852530.jpg",
                      "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg",
                      "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg"]
                  },
                  {
                    id: "3",
                    name: "Neymar",
                    images: mages:["https://www.thesun.co.uk/wp-content/uploads/2019/05/NINTCHDBPICT000485852530.jpg",
                      "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg",
                      "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg"]
                  },
                  {
                    id: "4",
                    name: "Gabriel de Jesus",
                    images:["https://i.pinimg.com/474x/f1/36/ca/f136ca04817e60fa12f4a5680101ff8b.jpg",
                      "https://i.pinimg.com/474x/b1/da/e2/b1dae2fe6ca1620e5d1949a2dcd33a0c.jpg",
                      "https://i.pinimg.com/564x/7b/53/32/7b5332ef6a981b3c54e855495ea1c828.jpg"]
                  },
                  {
                    id: "5",
                    name: "Roberto Firmino",
                    images:mages:["https://www.thesun.co.uk/wp-content/uploads/2019/05/NINTCHDBPICT000485852530.jpg",
                      "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg",
                      "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg"]
                  }
          ]
          export default PlayerImages;
  </code></pre>
  
  <p>This is how I have the ImageGallery component set up. Unfortunately, the way I have componentDidMount set up, shows Cristiano Ronaldos images in all profiles.  How can I map it in order to make sure that each profile has the pictures of that particular player when you tap the gallery button on their profile?</p>
  
  <pre><code>//ImageGallery.js
      import React, { Component } from "react";
      import { StyleSheet, Text, View } from "react-native";
      import { SliderBox } from "react-native-image-slider-box";
      import { withNavigation } from "react-navigation";
      import PlayerImages from "../Data/PlayerImages";
  
      class ImageGallery extends React.Component {
        static navigationOptions = {
          title: "Player Gallery",
          headerStyle: {
            backgroundColor: "#53b4e6"
          },
          headerTintColor: "#f6c945",
          headerTitleStyle: "bold"
        };
        constructor(props) {
          super(props);
          this.state = {
            images: []
          };
        }
  
        componentDidMount() {
          let images = PlayerImages[0].images;
          this.setState({ images });
        }
        render() {
          return (
            &lt;View style={styles.container}&gt;
              &lt;SliderBox
                images={this.state.images}
                sliderBoxHeight={900}
                onCurrentImagePressed={index =&gt;
                  console.warn(`image ${index} pressed`)
                }
                dotColor="yellow"
                inactiveDotColor="white"
              /&gt;
            &lt;/View&gt;
          );
        }
      }
  
      const styles = StyleSheet.create({
        container: {
          flex: 1
        }
      });
  
      export default withNavigation(ImageGallery);
  </code></pre>
  
  <p>Finally, when you are on the players profile, you should have access to their gallery by tapping the button in the header.  As I mentioned earlier in the post, when you tap it, you get only the images of Cristiano Ronaldo.</p>
  
  <pre><code>//PlayerProfile.js
      headerRight: (
                &lt;Button
                  onPress={() =&gt; navigation.navigate("ImageGallery")}
                  title="Gallery"
                  color="#f6c945"
                /&gt;
              )
  </code></pre>