I have added a button that triggers a function called 'cou' upon clicking. However, when I add items to the wishlist, the header does not render the updated count. Strangely, when I click the button, everything works perfectly fine.
const [count, setCount] = useState((JSON.parse(localStorage.getItem("liked"))));
const cou = () => {
let oldData = JSON.parse(localStorage.getItem('liked') || "[]")
if (oldData.length === count.length) {
setCount((JSON.parse(localStorage.getItem("liked"))))
} else {
setCount((JSON.parse(localStorage.getItem("liked"))))
}
};
useEffect(() => {
let oldData = JSON.parse(localStorage.getItem('liked') || "[]")
if (oldData.length === count.length) {
setCount((JSON.parse(localStorage.getItem("liked"))))
} else {
setCount((JSON.parse(localStorage.getItem("liked"))))
}
}, [(count.length)]);
This span element is located in the header:
<span style={{ position: 'relative', left: '-21px', top: '-18px' }}>{count.length}</span>}