- Currently, I am teaching myself React.
- When I click on the favorites button, which is represented by a heart symbol, it changes color.
- However, upon refreshing the page, the color change disappears.
- To address this issue, I came across the following helpful link: How to maintain state after a page refresh in React.js?
- After implementing the solution, I can now see the local storage in the developer tools application tab.
- Despite these changes, the color is still not retained upon page refresh.
- While debugging, I noticed that nothing is being printed in getInitialState. Could this be causing the problem?
- Can you provide guidance on how to fix this issue so that I can learn to handle it myself in the future?
- I have also included my relevant code snippet and sandbox below.
- All of my code can be found in RecipeReviewCard.js
https://codesandbox.io/s/xrp56z04yq
getInitialState = () => {
var addFavorite = localStorage.getItem("AddFavorite") || 1;
console.log("getInitialState--->", addFavorite);
return {
addFavorite: addFavorite
};
//this.setState(state => ({ belowExpanded: !state.belowExpanded }));
};
<FavoriteIcon
style={{ display: this.state.addFavorite ? "none" : "" }}
onClick={e => {
console.log("favoriteEvent---.", e);
console.log(
"this.state.addFavorite---.",
this.state.addFavorite
);
localStorage.setItem("AddFavorite", !this.state.addFavorite);
this.setState({ addFavorite: !this.state.addFavorite });
console.log(
"!this.state.addFavorite---.",
!this.state.addFavorite
);
this.props.onAddBenchmark(this.props);
}}
/>