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>
/>
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}
/>