Change one button color when onPress in list

Question

So i want to make a list with a heart button when i tap on one heart button.

i want only one button changed color. and save the current button color state.

My Problem is When i tap on one heart button, all button changed color.

Screenshot:

this is my code

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Button,
} from 'react-native';

import { ListItem } from 'react-native-elements'
import { Icon } from 'react-native-elements'
import Data from './src/data/sampledata.json';

export default class App extends Component<Props> {
  constructor(props) {
    super(props);

    this.state = {
      buttonColor: '#979797', // default button color goes here, grey is default
    };
  }

  onButtonPress = () => {
    if(this.state.buttonColor=='#ff002b')
    {
      this.setState({ buttonColor: '#979797' }) // grey
    }
    else {
      this.setState({ buttonColor: '#ff002b' }) // red
    }
  }

  render() {
    return (
      <View style={styles.container}>
        {
          Data.map((item, i) => (
            <ListItem
              key={item.index}
              title={item.dataItem}
              rightIcon={
                <Icon
                raised
                name='heart'
                type='font-awesome'
                color={this.state.buttonColor}
                onPress={this.onButtonPress}
              />
            }
            />
          ))
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

Answer 1

One way to achieve this is as follows:

What you can do is keep track of the selected items in an array. Using getUpdatedSelectedItemsArray function you can get an array that contains all the selected item like so

const getUpdatedSelectedItemsArray = (selectedItems, id) => {
    const forDeletion = [id]; //can also be used for multiple ids
    if (selectedItems.includes(id)) {
        //if id already exists delete it
        return selectedItems.filter(item => !forDeletion.includes(item));
    } 
    //otherwise push it
    selectedItems.push(id);
    return selectedItems;
};

you can call the above function from this.onButtonPress(item) which takes item as an argument.

//Creating state

this.state = {
      buttonColor: '#979797', 
      selectedItems: []
};

Calling getUpdatedSelectedItemsArray() will give you updated array which you can set in your selectedItems state.

Lastly you will have check while giving the color to icon(item), that if item.id exists in this.state.selectedItems then show red otherwise grey, like so

Data.map((item, i) => (
            <ListItem
              key={item.index}
              title={item.dataItem}
              rightIcon={
                <Icon
                raised
                name='heart'
                type='font-awesome'
                color={this.checkIfIDExists(item.id) ? 'red' : 'grey'}
                onPress={this.onButtonPress}
              />
            }
            />
))

P.S this.checkIfIDExists(item.id) is a function the returns true if id exists in selectedItems array.