title: How can I persist localstorage when ComponentDidMount resets the value on refresh?
body: <p>I am appending an item to each array item when fetching from a list and setting it to zero.
  Then running the function in ComponentDidMount().</p>
  <pre><code>newsList = (category) =&gt; {
      fetch(API_URL)
        .then((response) =&gt; response.json())
        .then((response) =&gt; {
          var news = response.articles;
          news = news.map((x) =&gt; ({ ...x, likes: 0 }));
      
            this.setState({ general: news }, () =&gt; {
              localStorage.setItem(&quot;general&quot;, JSON.stringify(this.state.general));
            });
        });
    };
  </code></pre>
  <p>I am subsequently incrementing the 'like' value I appended and saving to local storage.</p>
  <pre><code>generalLikeCount = (x) =&gt; {
      let newArr = [...this.state.general];
      newArr[x][&quot;likes&quot;] = parseInt(newArr[x][&quot;likes&quot;]) + 1;
      this.setState({ general: newArr }, () =&gt; {
        localStorage.setItem(&quot;general&quot;, JSON.stringify(this.state.general));
      });
    };
  </code></pre>
  <p>But on every refresh, likes counter is reset to zero. I'm not sure how to fix this.</p>