Render repeating components in a loop

Question

I want to refactor my following code to display multiple icons, using a loop. I have tried looking for examples but so far I have found map being used on arrays, but I don't have array or any collection.

<View style={{ flexDirection: 'row', alignItems: 'center' }}> <Icon type="FontAwesome" name="star" style={{ fontSize: 30, color: '#f1c40f' }} /> <Icon type="FontAwesome" name="star" style={{ fontSize: 30, color: '#f1c40f' }} /> <Icon type="FontAwesome" name="star" style={{ fontSize: 30, color: '#f1c40f' }} /> <Icon type="FontAwesome" name="star" style={{ fontSize: 30, color: '#f1c40f' }} /> <Icon type="FontAwesome" name="star" style={{ fontSize: 30, color: '#f1c40f' }} /> </View>

I rather would use react-native-star-rating package, which handles that for you, also it covers halve stars. — Abraham
– Abraham, Commented Jun 20, 2019 at 13:37

Dinith Minura · Accepted Answer · 2019-06-20 09:16:35Z

You can use a function which returns an array of Icon tags to render these stars,Check following code segment.

export default class App extends React.Component { createStars = () => { let stars = [] for (let i = 0; i < 5; i++) { stars.push(<Icon type="FontAwesome" name="star" style={{ fontSize: 30, color: '#f1c40f' }} />) } return stars } render() { return ( <View style={styles.container}> <View style={{ flexDirection: 'row', alignItems: 'center' }}> {this.createStars()} </View> </View> ); } }

Asaf Aviv · Accepted Answer · 2019-06-20 09:27:51Z

2

Split it into small functions

const renderIcon = () => <Icon type="FontAwesome" name="star" style={{ fontSize: 30, color: '#f1c40f' }} />; const renderIcons = num => [...Array(num)].map(renderIcon); <View style={{ flexDirection: 'row', alignItems: 'center' }}> {renderIcons(5)} {renderIcons(4)} {renderIcons(3)} {renderIcons(2)} {renderIcons(1)} </View>

You can take it further and add name style to renderIcon

answered Jun 20, 2019 at 9:27

Asaf Aviv

11.8k2 gold badges33 silver badges47 bronze badges

4 Comments

Abraham Over a year ago

This answer seems definitely cool, but you can also use Array(num).fill(num) instead of [...Array(num)], giving you more options.

Asaf Aviv Over a year ago

@CarlosAbraham Thank you, but whats the options it gives us ?

Abraham Over a year ago

[...Array(3)] creates an empty array of size 3, with undefined values in it, you can do Array(3) and it would be the same thing. It is just another option, I wanted to share :)

Asaf Aviv Over a year ago

@CarlosAbraham Ah my bad, I thought you meant it give us more options in renderIcons woops, Thanks for sharing

Collectives™ on Stack Overflow

Render repeating components in a loop

2 Answers 2

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Related