react localstorage keeps creating brackets on every page refresh/reload

April 19, 2022

I have code below

const peopleFromLocalStorage = JSON.parse(localStorage.getItem("people") || "[]");
const [peopleLocal, setPeopleLocal] = useState([peopleFromLocalStorage]);

useEffect(() => {
localStorage.setItem("people", JSON.stringify(peopleLocal));
}, [peopleLocal]);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (firstName && lastName && birthDate, city, program, group) {
      const person = { id: new Date().getTime().toString(), firstName, lastName, birthDate, city, program, group };
      setPeopleLocal((peopleLocal) => {
        return [...peopleLocal, person];
      });
      setFirstName('');
      setLastName('');
      setBirthDate('');
      setCity('');
      setProgram('');
      setGroup('');
    } else {
      console.log('empty values');
    }
  };

The problem is when I reload/refresh the page and look at localstorage I see that everytime it adds brackets []

>Solution :

You don’t need to pass the peopleFromLocalStorage inside a array.

const peopleFromLocalStorage = JSON.parse(localStorage.getItem("people") || "[]");
const [peopleLocal, setPeopleLocal] = useState(peopleFromLocalStorage);