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        gt             initialArr      blue   text1     red   text2     buttonsListArr        for  let i   0  i  lt  initialArr length  i        buttonsListArr push      lt Button style   borderColor  initialArr i  0     onPress  this onPress bind this   gt  initialArr i  1   lt  Button gt              render       return        lt View style       gt        buttonsListArr       lt  View gt        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

User · Accepted Answer

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>
);

User · Answer

render       return        lt View style       gt          initialArr map  prop  key    gt             return               lt Button style   borderColor  prop 0     key  key  gt  prop 1   lt  Button gt                              lt  View gt          should do the trick

User · Answer

If u want a direct  quick away  without assing to variables     urArray map  prop  key    gt         console log emp        return  lt Picker Item label  emp Name  value  emp id    gt

User · Answer

For initial array  better use object instead of array  as then you won t be worrying about the indexes and it will be much more clear what is what   const initialArr          color   blue       text   text1           color   red       text   text2        For actual mapping  use JS Array map instead of for loop - for loop should be used in cases when there s no actual array defined  like displaying something a certain number of times   onPress        gt                renderButtons         return initialArr map  item    gt            return                lt Button                  style    borderColor  item color                    onPress  this onPress               gt                   item text               lt  Button gt                             render         return            lt View style       gt                                this renderButtons                          lt  View gt            I moved the mapping to separate function outside of render method for more readable code  There are many other ways to loop through list of elements in react native  and which way you ll use depends on what do you need to do  Most of these ways are covered in this article about React JSX loops  and although it s using React examples  everything from it can be used in React Native  Please check it out if you re interested in this topic   Also  not on the topic on the looping  but as you re already using the array syntax for defining the onPress function  there s no need to bind it again  This  again  applies only if the function is defined using this syntax within the component  as the arrow syntax auto binds the function

[react-native] How to loop and render elements in React-native?

Examples related to react-native