title: why does using JSON.parse cause a cross origin error in reactjs?
body: <p>so I've got an array of JSON data saved to local storage like so  </p>
  
  <pre><code>localStorage.setItem('user_data', JSON.stringify(data));
  </code></pre>
  
  <p>getting from local storage like this but a console.log(this.state.healthData) returns null</p>
  
  <pre><code>  constructor(props) {
          super(props);
          this.state = {
              healthData: {}
          }
      }
  
   this.setState({ healthData: JSON.parse(localStorage.getItem('user_data')) });
  </code></pre>
  
  <p>but I know the data can get pulled because a  <code>console.log(localStorage.getItem('user_data'));</code> prints this {"age":"20","gender":"male","goal":"recomp","height":"181","weight":"80"}.</p>
  
  <p>so I also tried <code>console.log(JSON.parse(this.state.healthData))</code> but this causes a "cross origin error"
  <a href="https://i.stack.imgur.com/y7nIn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y7nIn.jpg" alt="error I receive after using JSON.phrase"></a></p>
  
  <p>thing is this code works on my app.js page as you can probably see in the screenshot logging </p>
  
  <pre><code>{age: "20", gender: "male", goal: "recomp", height: "181", weight: "80"}.
  </code></pre>
  
  <p>so whats causing this and is there another way to do it?</p>