CODEWITHSUNDEEP
javascriptreactjsreact-native
Python Master
Python Master

Reputation: 47

How to dynamically change icon name?

so i have this code:

                                      <Icon
                                            onPress={async () => {
                                                if (favorites.some(item => item == post.id)) {
                                                    favorites.splice(favorites.indexOf(post.id), 1)
                                                    const newFavoritesArrayWithoutClickedID = favorites
                                                    await AsyncStorage.setItem("favorites", JSON.stringify(newFavoritesArrayWithoutClickedID))
                                                } else {
                                                    const newFavoritesArray = [...favorites, post.id]
                                                    await AsyncStorage.setItem("favorites", JSON.stringify(newFavoritesArray))
                                                }
                                            }}
                                            name={favorites.some(item => item == post.id) ? "heart" : "heart-outline"}
                                            type='ionicon'
                                            color={Colors.primaryRed}
                                        />

But if i press the heart icon it will add to async storage and show it in favorites but the heart icon doesnt change untill next render. Is there any solution to change this icon dynamically?

UPDATE:

Here i declare FAVORITES state, fetch it from Async Storage and fet it to favorites

   const [favorites, setFavorites] = useState([])

    useEffect(() => {
        async function fetchData() {
            let response = await AsyncStorage.getItem("favorites");
            response = JSON.parse(response)
            response !== null && !favorites.includes(...response) && setFavorites([...favorites, ...response])
            response = ""
        }
        fetchData()
    }, [])

Upvotes: 0

Views: 510

Answers (1)

Giovanni Esposito
Giovanni Esposito

Reputation: 11156

You forgot to set state favorites state in onPress function. I would suggest ot modify your code in this way:

<Icon
   onPress={async () => {
      if (favorites.some(item => item == post.id)) {
        const newFavoritesArrayWithoutClickedID = [...favorites];                                      
        newFavoritesArrayWithoutClickedID.splice(newFavoritesArrayWithoutClickedID.indexOf(post.id), 1);
        setFavorites(newFavoritesArrayWithoutClickedID); //<-- set new state
        await AsyncStorage.setItem("favorites", JSON.stringify(newFavoritesArrayWithoutClickedID));
      } else {
        let newFavoritesArray = [...favorites];
        newFavoritesArray = [...newFavoritesArray , post.id];
        setFavorites(newFavoritesArray); //<-- set new state
        await AsyncStorage.setItem("favorites", JSON.stringify(newFavoritesArray));
      }
   }}
   name={favorites.some(item => item == post.id) ? "heart" : "heart-outline"}
   type='ionicon'
   color={Colors.primaryRed}
/>

Explanation: when you work with React, if you want to dynamic re-render something you have to use state variable. Your initial useEffect sets favourites the first time but if you change it on some logic (like onPress function) you should update state value if you want to re-render the icon.

Upvotes: 2

Related Questions