react add array to localStorage

Question

I'm making an advent calendar in React and using localStorage so the opened doors remain open when the user return the next day.

I am able to write to and read the localStorage but the first time the user clicks on the door it is not added, it adds it to the openedArr array but not localStorage, I'm sure I'm missing something simple but cannot see it! here is my code..

  const localData = localStorage.getItem("openDoors");
  const [openedArr, setOpenedArr] = useState(localData ? localData : []);
  const openDoor = e => {
    e.currentTarget.parentElement.classList.add("opened");
    setOpenedArr([...openedArr, e.currentTarget.id]);
    localStorage.setItem("openDoors", openedArr);
  };

Davin Tryon · Accepted Answer · 2019-11-20 09:09:55Z

6

The value you are setting is not the same as the value you add to local storage.

Try something like this:

const openDoor = e => {
    e.currentTarget.parentElement.classList.add("opened");
    const newValue = [...openedArr, e.currentTarget.id];
    setOpenedArr(newValue);
    localStorage.setItem("openDoors", JSON.stringify(newValue));
  };

edited Nov 20, 2019 at 9:09

answered Nov 20, 2019 at 9:08

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andres Over a year ago

you also need to stringify value

emil · Accepted Answer · 2019-11-20 09:08:24Z

2

Everything is saved as string in localstorage. You need to update stringify/parse value when you save/load from localstorage.

...
const localData = JSON.parse(localStorage.getItem("openDoors"));
...
localStorage.setItem("openDoors", JSON.stringify(openedArr));

Try above code after cleaning local storage. All should be good!

answered Nov 20, 2019 at 9:08

emil

6,3844 gold badges33 silver badges38 bronze badges

Collectives™ on Stack Overflow

react add array to localStorage

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related