title: React and localStorage getting NaN
body: <p>I've never really used localStorage before but it seemed easy enough. Alas, I'm running into some weird issues using it with React. </p>
  
  <p>I'm trying to save the number of clicks for an item in localStorage so when I navigate around the app it saves the data.</p>
  
  <p>I view the localStorage in the console and <code>setItem</code> works on click and increments by one like expected but a couple things are happening</p>
  
  <ol>
  <li>On the first click the number of clicks is disappearing from the DOM. </li>
  <li>After the first click, the value becomes <code>NaN</code></li>
  <li>When I navigate to another page and use the browser navigation to return to that page. The information is gone. I'm guessing this has something to do w/ a React hook I'm not using properly but I could be wrong. </li>
  </ol>
  
  <p>Here's the code. </p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import {IndexLink} from 'react-router';
  /* eslint-disable */
  import Item from '../styles/LinkItem.css';
  
  class LinkItem extends Component {
    constructor(props) {
      super(props);
      this.state = {
        clicks: 0,
        text: this.props.link,
        newText: null
      };
    }
    getClicksCount() {
      const localStorageRef = localStorage.getItem('link-' + this.props.link);
  
      if(localStorageRef) {
        this.setState({
          clicks: JSON.parse(localStorageRef) + 1
        })
      }
    }
    componentWillMount() {
      this.getClicksCount()
    }
    editLink() {
      const newText = prompt('Update your link');
      this.setState({
        newText: newText
      }, function(){
        this.props.data.updateLink(this.props.index, this.state.newText);
      })
    }
    handleClick(e) {
      e.preventDefault();
      const clicks = this.state.clicks;
      this.getClicksCount();
    }
    render() {
        return (
          &lt;tr&gt;
            &lt;td&gt;
                &lt;IndexLink onClick={this.handleClick.bind(this)} to={{pathname: 'landing/' + this.props.link}}&gt;{this.state.newText != null ? this.state.newText : this.props.link}&lt;/IndexLink&gt;
            &lt;/td&gt;
            &lt;td&gt;{this.state.clicks}&lt;/td&gt;
            &lt;td&gt;&lt;button className="btn btn-default" onClick={this.editLink.bind(this)}&gt;Edit&lt;/button&gt;&lt;/td&gt;
            &lt;td&gt;&lt;button className="btn btn-danger" onClick={this.props.data.deleteLink.bind(null, this.props.index)}&gt;Delete&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
      );
    }
  }
  
  export default LinkItem;
  </code></pre>