Im having similar problem. can't get it fixed. Variation is an array, inside there is another array called variation, with objects
_getVariations = () => {
const { variations } = this.state;
if (variations.length > 0) {
variations.map((vari) => {
vari.variation.map((ivari) => {
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>
)
})
});
});
}
}
This can be done in multple ways.
1. As suggested above, before `return` store all elements in the array
2. Loop inside `return`
Method 1
let container =[];
let arr = [1,2,3] //can be anything array, object
arr.forEach((val,index)=>{
container.push(<div key={index}>
val
</div>)
/**
* 1. All loop generated elements require a key
* 2. only one parent element can be placed in Array
* e.g. container.push(<div key={index}>
val
</div>
<div>
this will throw error
</div>
)
**/
});
return (
<div>
<div>any things goes here</div>
<div>{container}</div>
</div>
)
Method 2
return(
<div>
<div>any things goes here</div>
<div>
{(()=>{
let container =[];
let arr = [1,2,3] //can be anything array, object
arr.forEach((val,index)=>{
container.push(<div key={index}>
val
</div>)
});
return container;
})()}
</div>
</div>
)
