Manage Selected Item Style with React Native State in Group of Items

Question

I am updating my water reminder app where user select one type of drink and then amount to drink.

What I am trying to do is that I have array containing drinks and I map through that array to display them. I need user to select which drink, she would like to drink. After selection I would like to change its style to highlight the selected drink.

I have tried nested object with selectedDrink state but as far as I read here nested objects are not good for performance in React.

When I use selected state and when any of them is clicked, all of them style is changed.

state = {
    selected: false
    selectedDrink: {
        Water: false,
        Coffee: true,
        Tea: false,
    },
};

drinkList = (begin, end) => {

    drinks = [
      'Water',
      'Coffee',
      'Tea',
    ];
    drinks = drinks.slice(begin, end);

return drinks.map(data => {
  const imageLinks = {
    Water: require('../assets/images/Water.png'),
    Coffee: require('../assets/images/Coffee.png'),
    Tea: require('../assets/images/Tea.png'),
  };

  {
    if (data === 'Water') {
      image = <Image style={styles.drinkImages} source={imageLinks.Water} />;
    } else if (data === 'Coffee') {
      image = <Image style={styles.drinkImages} source={imageLinks.Coffee} />;
    } else if (data === 'Tea') {
      image = <Image style={styles.drinkImages} source={imageLinks.Tea} />;
    } else {
      image = <Image style={styles.drinkImages} source={imageLinks.Water} />;
    }
  }

  return (
    <View style={styles.drinkContainer}>
      <TouchableOpacity
        onPress={() => {
          this.setState({ selected: !this.state.selected });
        }}

        //this is where I would like to change style based on state
        style={[
          styles.drinkButtonContainer,
          this.state.selected ? styles.drinkSelectedButtonContainer : null,
        ]}
      >
        {image}
      </TouchableOpacity>
      <Text style={styles.infoTextStyle}>{data}</Text>
    </View>
  );
});
};

Answer 1

What I did is create selected state with empty string. Each time anyone of the item is clicked, I set the state with drink name and then I compared selected state with drink name, If it matches style is applied to selected drink

state = {
  selected: '',
};

  return (
    <View style={styles.drinkContainer}>

        // I set the state to drink name
      <TouchableOpacity
        onPress={() => {
          this.setState({ selected: data });
        }}

        // Then compare drink name with selected state and apply styling
        style={[
          styles.drinkButtonContainer,
          this.state.selected === data ? styles.drinkSelectedButtonContainer : null,
        ]}
      >
        {image}
      </TouchableOpacity>
      <Text style={styles.infoTextStyle}>{data}</Text>
    </View>
  );