I'm trying to create a simple website , when you click the heart<svg> it will change the color and you can find your liked Items on /fav page
I want to retain the liked Items after the page is refreshed. Ive tried to
do this using localStorage to my addFav function but it doesn't work.
what i did:
const Home = (props) => {
const [clicked, setClicked] = useState(false);
const dispatch = useDispatch();
const stateItem = useSelector((state) => state.fav);
const fav = localStorage.getItem("fav")? JSON.parse(localStorage.getItem("fav"):[]
const addFav = () => {
setClicked((prevState) => !prevState);
dispatch(
addFav({
name: props.name,
image: props.image,
})
);
localStorage.setItem("fav", JSON.stringify(stateItem));
};
my slice.js
export const favSlice = createSlice({
name: "fav",
initialState: [],
reducers: {
addFav: (state, action) => {
const favItem = {
name: action.payload.name,
image: action.payload.image,
};
state.push(favItem);
},
removeFav: (state, action) => {
return state.filter((item) => item.name !== action.payload.name);
},
},
});
App.js
function App() {
const favItems = useSelector((state) => state.fav");
return (
<div className="App">
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/fav" element={<FavItem FavItem={favItems}/>}/>
</Routes>
</div>
);
Home.js
const Home = (props) => {
const [clicked, setClicked] = useState(false);
const dispatch = useDispatch();
const addToFav = () => {
setClicked((prevState) => !prevState);
dispatch(
addFav({
name: props.name,
image: props.image,
})
);
};
return (
<div
className={classes.container}
key={props.name}
onClick={handleClick}>
<img src={props.image} alt="" className={classes.image} />
<p className={classes.name}>{props.name}</p>
<svg onClick={addToFav} fill={clicked ? "black" : "lightgray"}></svg>
</div>
);
};
export default Home;
