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\",\"t         


        

Answer 1

You would usually use map for that kind of thing.

buttonsListArr = initialArr.map(buttonInfo => (
  {buttonInfo[1]}
);

(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 => (
  {buttonInfo.text}
);