How to repeat one element in JSX?

Question

I want repeat one image element in JSX, my required code is like as below:

<View>
  <Image source={require('../images/image.png')} />
  <Image source={require('../images/image.png')} />
  <Image source={require('../images/image.png')} />
  <Image source={require('../images/image.png')} />
  <Image source={require('../images/image.png')} />
</View>

How i can use a loop to generate this code?

Answer 1

Easy! You can create an array on the fly. Like this:

<View>
  {[...Array(5)].map((x, i) => <Image key={i} source={require('../images/image.png')} />)}
</View>

The [...Array(5)] gives: [undefined, undefined, undefined, undefined, undefined]. Which might look useless, but actually, this gives us something to iterate over with map() which we can use to return the Components we want (we don't need x here at all).

You could, to improve performance, create the array outside your render to prevent re-creating the temporary array on each re-render. You can also put your require separately for similar reasons.