# When saving data(array of objects) in React.State/ LocalStorage using ReactHooks, facing an error

**URL:** <https://forum.kirupa.com/t/when-saving-data-array-of-objects-in-react-state-localstorage-using-reacthooks-facing-an-error/643580>\
**Category:** web dev\
**Created:** [July 16, 2020, 3:13pm UTC](https://forum.kirupa.com/t/when-saving-data-array-of-objects-in-react-state-localstorage-using-reacthooks-facing-an-error/643580 "2020-07-16T15:13:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Umair\_Ashraf](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/umair_ashraf/32/11705_2.png) [@Umair\_Ashraf](https://forum.kirupa.com/u/Umair_Ashraf)\
**Post date:** [July 16, 2020, 3:13pm UTC](https://forum.kirupa.com/t/when-saving-data-array-of-objects-in-react-state-localstorage-using-reacthooks-facing-an-error/643580/1 "2020-07-16T15:13:59Z")

</div>

i am looking to save the customer product selection in basket and to avoid the effect of `refesh` of page i am also saving the customer selection to local storage, i am use spread `....prevItems` and using `window.localStorage.setItem` ,but as prevItems initial value is `null` so it comes up with an error of `TypeError: prevItems is not iterable` , i have tried passing the product,quantity to initial value(to make to iterable afterwards) but the `initialvalue= callback` is present outside the main function and was unsuccessful. Not sure what else i can do to overcome this issue.  
Any suggestions guys.

 ![pj8yE](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/b/b9f311c7da6079451179da16dfa13047fe2d1517.png) ![E4H0K](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/9/99137e2aae6d8f9097c563f207b84a1e44794a08.png)

````auto
 let initialvalue = () => {
     return window.localStorage.getItem("user-basket", {});
    };
    
        function App() {
        const [basketItems, setBasketItems] = useState(initialvalue());
    // basketItems will be like[{Product1},{Product2}, and so on...] i.e it will store each product as a new object
     const addBasketitems = (product, quantity) => {
        setBasketItems((prevItems) => {
          console.log("prevItems", prevItems);
          console.log("product", product);// the product customer selected
          console.log("quantity", quantity);// no. of item of a product customer selected
          const newItems = [...prevItems, { ...product, quantity }];
          window.localStorage.setItem("user-basket", JSON.stringify(newItems));
  return newItems;
        });

     <Router>
         
              <Switch>
              
                <Route
                 path="/"
                  exact
                  render={(props) => <Home {...props} userData={userData} userstatus={siginalready} addBasketitems={addBasketitems} 
               />}
             </Switch>
     </Router>
       
    ```
````

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [July 16, 2020, 3:50pm UTC](https://forum.kirupa.com/t/when-saving-data-array-of-objects-in-react-state-localstorage-using-reacthooks-facing-an-error/643580/2 "2020-07-16T15:50:02Z")

</div>

getItem() will return null if nothing is stored in the local storage by that key. Note that it only takes one argument, though. That extra `{}` you have is ignored.

If you want `{}` to be a default value, then you need to check for the return of getItem() and if null, return your empty object.

Since you seem to be expecting the item to be an object, you would also need to parse it before returning it, otherwise you’ll return the stringified version of that object. So what you’re looking for with initialvalue() is something more along the lines of:

```auto
let initialvalue = () => {
    const value = window.localStorage.getItem("user-basket");
    if (!value) {
        return {};
    }
    return JSON.parse(value);
};

```

---

<div class="post-metadata">

**Author:** ![Umair\_Ashraf](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/umair_ashraf/32/11705_2.png) [@Umair\_Ashraf](https://forum.kirupa.com/u/Umair_Ashraf)\
**Post date:** [July 17, 2020, 12:33am UTC](https://forum.kirupa.com/t/when-saving-data-array-of-objects-in-react-state-localstorage-using-reacthooks-facing-an-error/643580/3 "2020-07-17T00:33:53Z")

</div>

i wasnt sure about {} before but makes sense now. Thanks alot 🙂