How can I store state for every item in react localStorage?

Viewed 28

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;
1 Answers

Pass the item index to StickerNumber component and use it with isCollected -(${isCollected}${index}) while setting and getting the value from local storage

Related