Problem with identifying a button in a flatlist in React-Native

Question

I'm using React-Native and I'm having problems with identifiyng which button was pressed inside a flatlist. I can make them all change, but I want to make them change separately.

I already put an identifier in each element called num, but I don't know how to identify each button. My idea is having each button with an id (num), and in the onPress prop identify which button was pressed and change its color.

Also, I don't know if I will have to make different CSS for each button or if I can change them from main.

Main:

const main = () => {

  const [pressedButton, setPressedButton] = useState("#1e1e1e")

  return (
    <View style = {styles.container}>
      <View style = {styles.nav}>
        <View style={styles.nav_container}>
          <Text style = {styles.title_main}>Habits</Text>
        </View>
        <View style = {styles.divider_main} />
      </View>
      <ScrollView style = {styles.body_main}>
        <FlatList
          data = {[
            {key: "Habit", desc: "30 Minutes a Day", num: 0},
            {key: "Habit", desc: "30 Minutes a Day", num: 1},
            {key: "Habit", desc: "30 Minutes a Day", num: 2},
            {key: "Habit", desc: "30 Minutes a Day", num: 3},
          ]}
          renderItem = {({item}) =>
            <View style = {styles.list_item}>
              <Text style = {styles.list_item_text}>{item.key}</Text>
              <Text style = {styles.list_item_desc}>{item.desc}</Text>
              <TouchableWithoutFeedback
                onPress = {() => {
                  pressedButton == "#1e1e1e" ? setPressedButton("#9747FF") : setPressedButton("#1e1e1e")
                }}>
                <View style = {[styles.check_mark, {backgroundColor: pressedButton}]}>
                  <Image source = {require("./assets/black-check.png")} style = {styles.check_mark_img}/>
                </View>
              </TouchableWithoutFeedback>
            </View>}
          style = {styles.list_main}
        />
        
      </ScrollView>
      <View style = {styles.add_habit}>
        <View style = {styles.add_habit_vert}></View>
        <View style = {styles.add_habit_hor}></View>
      </View>
    </View>
  );
};

CSS:

check_mark: {
    width: 50,
    height: 50,
    borderRadius: 25,
    borderColor: "#9747FF",
    borderWidth: 3,
    backgroundColor: "#1e1e1e",
    position: "absolute",
    right: 20,
    alignItems: "center",
    justifyContent: "center",
  },

Answer 1

You could use index in renderItem.

Save that index in state with setPressedButtonIndex and add background style if item's index is equal to pressedButtonIndex

const [pressedButtonIndex, setPressedButtonIndex] = useState(null)

renderItem = {({item, index}) =>
            <View style = {styles.list_item}>
              <Text style = {styles.list_item_text}>{item.key}</Text>
              <Text style = {styles.list_item_desc}>{item.desc}</Text>
              <TouchableWithoutFeedback
                onPress = {() => {
                 setPressedButtonIndex(index)
                }}>
                <View style = {[styles.check_mark, index === pressedButtonIndex ? {backgroundColor: "#1e1e1e"} : {}]}>
                  <Image source = {require("./assets/black-check.png")} style = {styles.check_mark_img}/>
                </View>
              </TouchableWithoutFeedback>
            </View>}
          style = {styles.list_main}