Tengo dos matrices de datos separadas, la primera matriz es la lista completa de datos de la base de datos, la segunda matriz son los datos de los favoritos de los usuarios. Estoy generando la primera matriz en una lista plana en la pantalla y si el usuario marca como favorito un elemento de esa lista, guarda los datos de ese elemento en la matriz de favoritos y se muestra en una pantalla diferente. Tengo un ícono que necesito que se rellene o delinee en función de si ese elemento está marcado como favorito o no (rellenado si está marcado como favorito, perfilado si no). No estoy seguro de cuál es la mejor manera de hacerlo. Actualmente estoy tratando de comparar si cada matriz contiene las mismas ID. Además, he intentado usar setState para el ícono, pero si la ID coincide, configura todos los corazones en la lista plana para llenar. Esto es lo que tengo actualmente.
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> />si solo desea mostrar el ícono dependiendo de si el elemento es favorito. Tu puedes hacer:
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} />Pero, si desea actualizar el ícono cuando se hace clic, debe usar useState para manejar sus listas y usar una función que agregue o elimine el elemento en el que se hizo clic en la lista de favoritos. Algo como esto:
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} />