Why ' i ' don't increase in the for loop? - react-native

Question

My data in the imageUrl array . i don't load it with for loop .
loadImage() {
console.log('before', this.state.imagesUrl);
if (this.state.imagesUrl !== undefined && this.state.imagesUrl.length !== 0) {
console.log('after', this.state.imagesUrl);
const n = this.state.imagesUrl.length;
console.log('length' , n);
for ( let i = 0 ; i < n ; i++) {
// i = i + 1
console.log('element', i, this.state.imagesUrl[i]);
return (
<Image
source={{ uri: this.state.imagesUrl[i] }}
style={{ width: 45, height: 45, marginLeft: 2, marginTop: 2, marginRight: 2, borderRadius: 10 }}
/>
)
}
}
}

Answer 1

Use loadImage in ES6 format:
change:
loadImage(){
// ...
}
to:
loadImage = () => {
// ...
}
Then, you have to push to a array:
let arr = [] // empty array
for ( let i = 0 ; i < n ; i++) {
// ...
arr.push(
<Image
source={{ uri: this.state.imagesUrl[i] }}
style={{ styles.Image }} // your styles
/>
)
}
this.setState(arr)
and then in your jsx:
render(){
let {arr} = this.state
return(
<View>
{arr}
</View>
)
}