Ahmed Yaser
Ahmed Yaser

Reputation: 15

Nested map doesnt render jsx in react native

Here is the Json data and i have nested map functions and i want to grab phone case and icon. but JSX doesnt return anything. but when i console log it returns icon and phone case

  "variations": [
        {
            "id": "236",
            "variation": [
                {
                    "Phone Case": "iphone 8",
                    "icon": "https://aiminaabee.s3.ap-southeast-1.amazonaws.com/testing/app/icons/K2hOUtPdHMiiqyYoYv0LrvBQsrAPzcl1c5mHQkiV.png"
                }
            ],
            "quantity": "1",
            "price": "130.00",
        },
        {
            "id": "237",
            "variation": [
                {
                    "Phone Case": "iphone X",
                    "icon": "https://aiminaabee.s3.ap-southeast-1.amazonaws.com/testing/app/icons/K2hOUtPdHMiiqyYoYv0LrvBQsrAPzcl1c5mHQkiV.png"
                }
            ],
            "quantity": "1",
            "price": "150.00",
        }
    ],

Looping through using nested map function. to excess phone case and icon

_getVariations = () => {
  const { variations } = this.state;
  if(variations.length > 0){
    variations.map((vari) => {
      vari.variation.map((ivari) => {
        return Object.keys(ivari).map((key) => (
          <View style={styles.variationRow}>
             <View>
               <Text>{ivari[key]}</Text>
             </View>
             <View>
               <Image 
                 style={{ width: 25, height: 25 }}
                 source={{ uri: ivari[key] }}/>
             </View>
           </View>
        ));
      });
    });
  }
}

Upvotes: 0

Views: 68

Answers (1)

Chris Cousins
Chris Cousins

Reputation: 1912

You also need a return on the outer map:

variations.map((vari) => {
    return (
                vari.variation.map((ivari) => {
                      return (
                          Object.keys(ivari).map((key) => {
                              return (
                                  <View style={styles.variationRow}>
                                      <View>
                                        <Text>{ivari[key]}</Text>
                                      </View>
                                      <View>
                                          <Image
                                              style={{ width: 25, height: 25 }}
                                              source={{ uri: ivari[key] }}
                                          />
                                      </View>
                                  </View>
                               );
                          });
                      );
                });
    );
});

Upvotes: 1

Related Questions