How to loop and render elements in React-native?

Question

Is it possible to loop an identical component in Render function?

Something like this:

...  onPress = () => {  ... };  initialArr = [["blue","text1"],["red","text2"]]; buttonsListArr = [];  for (let i = 0; i < initialArr.length; i++)  {  buttonsListArr.push(    <Button style={{borderColor:{initialArr[i][0]}}} onPress={this.onPress.bind(this)}>{initialArr[i][1]}</Button>  ); }  ...  render() {   return (     <View style={...}>      {buttonsListArr}     </View> )}; 

I mean this is just finite list of components, so any components like ListView/ScrollView etc is not applicable in this particular case. This is just syntax question.

Answer 1

You would usually use map for that kind of thing.

buttonsListArr = initialArr.map(buttonInfo => (   <Button ... key={buttonInfo[0]}>{buttonInfo[1]}</Button> ); 

(key is a necessary prop whenever you do mapping in React. The key needs to be a unique identifier for the generated component)

As a side, I would use an object instead of an array. I find it looks nicer:

initialArr = [   {     id: 1,     color: "blue",     text: "text1"   },   {     id: 2,     color: "red",     text: "text2"   }, ];  buttonsListArr = initialArr.map(buttonInfo => (   <Button ... key={buttonInfo.id}>{buttonInfo.text}</Button> ); 

Answer 2

render() {   return (     <View style={...}>        {initialArr.map((prop, key) => {          return (            <Button style={{borderColor: prop[0]}}  key={key}>{prop[1]}</Button>          );       })}      </View>   ) } 

should do the trick