iteratively change properties and states of components

Question

I'm trying to port a HTML5 app over to React Native. In my original app I had 24 DOM elements, each with a custom length, maxLength, description, isActive and color attribute. I would use jQuery.each(); to iterate over the elements and use a constructor function to store the index and jQuery object for each element.

The constructor had various prototype functions to get/set the attributes along with associated style changes. Some functions would change neighboring elements' attributes and styles, and I would access these functions using the array of constructed objects.

So my question. How can I follow a similar pattern in React Native? Specifically, how do I add 'elements' into an array and then iterate through that array making visual/data changes to selected elements?

An example:

jQuery

$(document).ready(function(){
    var activities = [];
    Activity = function (idx, ele) {
        this.idx = idx;
        this.ele = ele;
    }
    $('.activity').each(function(index){
        activities[index] = new Activity(index, $(this));
    });
});

Answer 1

You can define the properties in an array and then iterate through it. To change them manipulate the array. Maybe put it into the state.

const elements = [
  {
    style: {
      color: 'red',
    },
    text: 'first',
  },
  {
    style: {
      color: 'green',
    },
    text: 'second',
  },
  {
    style: {
      color: 'blue',
    },
    text: 'third',
  },
]

…

elements.map((element) =>
  <View style={element.style}>
    <Text>{element.text}</Text>
  </View>
)