When I try to save state in a component after refreshing it sets that state to every component, what am I doing wrong? I basically want to set state to true or false for every unique item, how can i save it ? In react dev tool state is properly changed for every item on click but I guess I'm not saving it properly
Parent component :
const AllStickers = ({ countries, setStickersCollected }) => {
return (
<main>
{countries.map((country, index) => {
return (
<div key={index} className='stickers-section'>
<CountryTitle title={country} />
<div className='stickers'>
{stickers.map((item, index) => {
return (
<StickerNumber
key={index}
number={item}
setStickersCollected={setStickersCollected}
/>
);
})}
</div>
</div>
);
</main>
);
};
export default AllStickers;
child component :
const StickerNumber = ({ number, setStickersCollected }) => {
const [isCollected, setIsCollected] = useState(
JSON.parse(localStorage.getItem('isCollected')) || false
);
useEffect(() => {
window.localStorage.setItem('isCollected', JSON.stringify(isCollected));
}, [isCollected]);
const handleClick = (e) => {
setIsCollected(!isCollected);
if (isCollected === false) {
setStickersCollected((prev) => prev + 1);
} else if (isCollected === true) {
setStickersCollected((prev) => prev - 1);
}
};
return (
<p className='sticker-number' onClick={handleClick}>
{number}
<span
className='checkmark'
style={{ display: isCollected === false ? 'none' : 'block' }}
>
<FcCheckmark />
</span>
</p>
);
};
export default StickerNumber;