Set icon to outline or fill if 2 ID's from 2 arrays are the same-CodePudding

I have two separate arrays of data, the first array is the complete list of data from database, the second array is the data from the users favorites. I am outputting the first array in a Flatlist on screen and if the user favorites an item from that list, it saves the data from that item to the favorites array and displays on a different screen. I have an icon that I need to have filled or outline based on if that item is favorited or not (filled if favorited, outline if not). I am not sure the best way to go about this. I am currently trying to compare if each array contains the same ID's. Also, I have tried using setState for the icon but if the ID's match it sets every heart in the flatlist to fill. This is what I have currently.

list = [
{"id": 0, "firstName": "John", "lastName": "Smith"},
{"id": 1, "firstName": "Frank", "lastName": "White"},
]


favoritesList = [
{"favoritesId": 0, "firstName": "John", "lastName": "Smith"},
{"favoritesId": 1, "firstName": "Frank", "lastName": "White"},
]

  //Checking if favorite is checked
  let heartOutline = 'heart-outline';
  const favOutline = (favId)=> {
    favoritesId.forEach(el => {
      if (favId === el.favoritesId) {
        heartOutline = 'heart';
      } else {
        heartOutline = 'heart-outline';
      }
    });
  };

<FlatList
 data={list}
 keyExtractor={item => item.id}
 renderItem={({item}) => (
  <View>
   <Ionicons
   onPress={() => favOutline(item.id)}
   style={{alignItems: 'center', color: 'white'}}
   name={heartOutline}
   size={18}
   />
  </View>
 />

CodePudding user response：

if you only want to show the icon depending if the item is a favorite one. You can do:

  const getIconName = (favId)=> {
    const itemFound = favoritesList.find(el => el.favoritesId 
        === favId);

    return !!itemFound ? 'heart' : 'heart-outline';
  };

 <Ionicons
   onPress={() => favOutline(item.id)}
   style={{alignItems: 'center', color: 'white'}}
   name={getIconName(item.id)}
   size={18}
   />

But, if you want to update the icon when is clicked, then you should use the useState to handle your lists, and use a function that add, or delete, the item clicked to the favorites list. Something like this:

const [favoritesList , setFavoritesList ] = useState([
  {"favoritesId": 0, "firstName": "John", "lastName": "Smith"},
  {"favoritesId": 1, "firstName": "Frank", "lastName": "White"},
]);

const handleClickOnIcon = (item) => {
  const index = favoritesList.findIndex(el => el.favoritesId === item.id);

  //If the item is not a favorite then you add it 
  if(index === -1)
    return setFavoritesList([...favoritesList, item]);

  //Removes the item from favoritesList
  favoritesList.splice(index, 1);
  setFavoritesList([...favoritesList]);
};

 <Ionicons
   onPress={() => handleClickOnIcon(item)}
   style={{alignItems: 'center', color: 'white'}}
   name={getIconName(item.id)}
   size={18}
   />