title: Save array of objects to javascript localStorage not working
body: <p>I'm trying to store an array of objects in local storage. I'm using <a href="https://stackoverflow.com/a/43762443/3935156">this common method</a>:</p>
  
  <pre><code>localStorage.setItem( 'products', JSON.stringify(this.state.products) );
  let initialProducts = JSON.parse(localStorage.getItem("products") || "[]")
  </code></pre>
  
  <p>I'm getting the error: </p>
  
  <pre><code>SyntaxError: Unexpected token o in JSON at position 1
  </code></pre>
  
  <p>I know that error means I am parsing the JSON twice, however if I do not parse it, when I get "products" from localStorage it is:</p>
  
  <pre><code>[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p>Full code:</p>
  
  <pre><code>import React, { Component } from "react";
  import logo from "./logo.svg";
  import "./App.css";
  import ProductList from "../products/ProductList";
  import productData from "../products/model";
  
  class App extends Component {
    constructor(props) {
      super(props);
      let initialProducts = JSON.parse(localStorage.getItem("products") || "[]")
      console.log(initialProducts);
      this.state = {
        newProductName: "",
        newProductPrice: 0,
        products: initialProducts
      };
    }
  
    updateNewProductName = event =&gt; {
      this.setState({ newProductName: event.target.value });
    };
  
    updateNewProductPrice = event =&gt; {
      this.setState({ newProductPrice: event.target.value });
    };
  
    addProduct = () =&gt; {
      this.state.products.push({
        name: this.state.newProductName,
        price: this.state.newProductPrice
      });
      this.setState({
        products: this.state.products
      });
      localStorage.setItem( 'products', JSON.stringify(this.state.products) );
    };
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;div className="App-header-container"&gt;
              &lt;img
                src="https://www.ezyvet.com/wp-content/uploads/2016/04/ezyVet-Logo-22-4.png"
                alt="ezyVet Cloud Veterinary Practice Management Software"
                id="logo"
                className="App-logo"
                data-height-percentage="65"
                data-actual-width="768"
                data-actual-height="252"
              /&gt;
            &lt;/div&gt;
          &lt;/header&gt;
          &lt;div className="App-header-container"&gt;
            &lt;ProductList products={this.state.products} /&gt;
            &lt;input
              type="text"
              id="uname"
              name="uname"
              required
              minLength="2"
              placeholder="name"
              value={this.state.newProductName}
              onChange={this.updateNewProductName}
            /&gt;
            &lt;input
              type="number"
              id="uprice"
              name="uprice"
              required
              placeholder="price"
              value={this.state.newProductPrice}
              onChange={this.updateNewProductPrice}
            /&gt;
            &lt;button onClick={this.addProduct}&gt;Add Product&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>