Es posible también usar el mismo Icon de FontAwesome5 pasándole la prop solid. De esta forma, se muestra el ícono "lleno". En este caso estoy haciendo que esa propiedad sea true cuando el pokemon está marcado como favorito.
Consideré extraer también la lógica del botón en un custom hook. Por si a alguien le sirve, lo dejo por aquí. Así, el componente de ícono queda mucho más limpio, y solo se pasa la función toggleFavorite.
Por si alguien se pregunta cual es el nombre de la extension que le dice cuanto es el peso del import este es el link
Solución con filter
const favorites =awaitgetPokemonsFavoriteApi();const newFavorites = favorites.filter(fav=> fav != id );
No entiendo porque le permiten al profesor utilizar Lodash para enseñar. En una instancia de aprendizaje, los estudiantes deberiamos aprender a utilizar las funcionalidades core del lenguaje para acentar las bases, que al final es lo fundamental para que despues cada quien oriente su camino con las herramientas que quiera adquirir.
Conocimientos previos
HTML, CSS y JavaScript
Fundamentos de React.js
Fundamentos de React Native
Manejo de listas en React Native
Consumo de APIs en React Native
ahi esta tu respuesta, se supone que los sabemos, si no lo sabes hay muchos curos en react y JS donde lo puedes aprender, esta enseñando una manera diferente de hacerlo, y no es para estar quejandose cada video!! saludos
La respuesta de Hans no viene al caso, ya que en si estas aprendiendo un framework nuevo de Javascript, por lo que estoy totalmente de acuerdo, no debes usar librerías en un curso de aprendizaje, además que en el entorno profesional es muy poco probable que te permitan usar librerias, el curso tiene sus up and downs, hasta temas de malas prácticas.
exportasyncfunctionremoveFavoriteApi(id){try{const favorites =awaitgetFavoritesApi()const newFavorites = favorites.filter((fav)=> fav !== id)awaitAsyncStorage.setItem(favoriteKey,JSON.stringify(newFavorites))}catch(e){throw e
}}```Lo correcto es usar los métodos nativos de los arrays.
el curso está super, me hubiera gustado más si de vez este proyecto fuera una tienda ropa, ecommerce, carrito compras más ajustado la vida real.
Para vaciar el array y no dejar basura en el storage lo que se podría hacer es escribirlo vacío
import{ useState }from'react';import{ addFavouritePokemon, deleteFavouritePokemon, getFavouritePokemons,}from'@/services/favouritesService';exportconstuseModifyFavourites=()=>{const[isLoadingModifyFavourites, setIsLoadingModifyFavourites]= useState<boolean>(false);constmodifyFavourites=async(pokemonId: number |undefined)=>{try{setIsLoadingModifyFavourites(true);if(!pokemonId)return;constfavourites: number[]=awaitgetFavouritePokemons();const isPokemonSaved = favourites.includes(pokemonId);if(!isPokemonSaved){// si no existe el pokemon en el array, lo añadeawaitaddFavouritePokemon(pokemonId);}else{// si ya existe el pokemon en el array, lo eliminaawaitdeleteFavouritePokemon(pokemonId);}}catch(error){console.error('Error fetching favourites:', error);}finally{setIsLoadingModifyFavourites(false);}};return{ isLoadingModifyFavourites, modifyFavourites };};
El problema que tiene, es debido a que no hay nada, cuando lo hay nada lo que retorna es null, por lo que cuando no exista nada deberías retornar un array vacío.
exportasyncfunctiongetFavoritesApi(){try{const favorites =awaitAsyncStorage.getItem(favoriteKey)if(!favorites){return[]}returnJSON.parse(favorites)}catch(e){throw e
}}
