How to use hooks in a loop?

Question

React Native

There is a list of blocks. It is necessary to make it so that when you click, the style of this block changes. I don't know how to implement it. I know that this cannot be done in a loop due to the possibility of breaking the order of the hooks, but how can this be done?

<FlatList
  data={arr}
  numColumns={7}
  renderItem={item => {
    item.state = 'noActive';
    console.log(item);
    return (
      <TouchableWithoutFeedback
        onPress={() => (item.state = 'active')}
        style={styles.fullContainer}>
        <View style={[styles.block, styles[item.state]]}>
          <Text>{item.item.name}</Text>
        </View>
      </TouchableWithoutFeedback>
    );
  }}
/>

Answer 1

but how can this be done?

You can create a separate component for TouchableWithoutFeedback and store states and styles in it.