I am building an e-commerece site. And I'm using a heart font icon which acts as a tool which users can use to favorite an item in the site. So when a user clicks on the icon, it changes it color to red from black. How can I save that change in the css ? Btw, Im using reactjs.
const addToWishList = (e) => {
e.target.style.color = 'red';
e.preventDefault();
const parent = e.target.parentElement;
const itemName = parent.childNodes[2].childNodes[0].textContent;
const itemImg = parent.childNodes[1].childNodes[0].src;
const obj = {
item: itemName,
img: itemImg
};
wishlist.push(obj);
};
Im using this code to change the color of the icon, but how can I say the updated changes. As the color changes back to black after refreshing the browser.
I am not 100% sure about how to do this the way you intend but I will just post here how I think this needs to be approached.
Since each user will have different items which are in their favorites, you need to find a way to store which items are favorites for each user.
When the particular user accesses their account, you need to first fetch the data regarding the favorite items of the user and then automatically change the color of the icon to red if the current page contains any such favorite items.
Storing the fetched data in a session variable would be helpful in making changes to it.
Also you need to include the code to make the necessary changes when user adds new item or removes item from their favorites!