title: ReactJS: How can I update state of property using localStorage?
body: <p>I have a <a href="https://github.com/mohitk05/react-insta-stories/blob/ec2c06e94917e58163b072e17e9821bcf69874bf/src/components/Container.js" rel="nofollow noreferrer">component</a> with the following initial state:</p>
  
  <pre><code>  constructor(props) {
      super(props)
      this.state = {
        currentId: 0,
        pause: true,
        count: 0,
        storiesDone: 0
      }
      this.defaultInterval = 4000
      this.width = props.width || 360
      this.height = props.height || 640
    }
  </code></pre>
  
  <p>I have to start from <code>currentId = 0</code> and then update the state of the component, even after a page refresh. </p>
  
  <p>I want to restore <code>currentId = 1</code> after persisting a value of <code>1</code>.</p>
  
  <p>I am getting an error that the property cannot change , when I try replacing <code>currentId = localStorage.getItem('currentId')</code> in the above code.</p>
  
  <pre><code>    var currentId = this.state.currentId;    
        localStorage.setItem( 'currentId', 1);
        console.log(currentId);
        localStorage.getItem('currentId');
  </code></pre>
  
  <p>I also tried:</p>
  
  <pre><code>  _this.setState((state) =&gt; {
        return {currentId: localStorage.getItem('currentId')};
      });
  </code></pre>