title: React component rendering before data received from localStorage
body: <p>I am having difficulties implementing a piece of React code that fetches and renders information from localStorage. </p>
  
  <p>I have a gallery of thumbnail pictures (components) that upon a click, trigger a function that fetches information from a db for that particular picture and stores the data in localStorage. It also redirects the user to the ShowTale component where I display information about the picture. </p>
  
  <pre><code>class Tale extends Component {
  
  handleClick(){
      const pictureId = this.props._id;
      this.props.fetchTale(pictureId);
  }
  
  render() {
      const {_id, title, story, picture} = this.props;
      return (
          &lt;div className="col-md-2 col-sm-6"&gt;
              &lt;div className="thumbnail"&gt;
                  &lt;img src={picture} /&gt;
                  &lt;div className="caption"&gt;
                      &lt;h4&gt;{title}&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;p&gt;
                      &lt;Link onClick={this.handleClick.bind(this)} to="showTale" className="btn btn-primary"&gt;More Info&lt;/Link&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  };
  
  export default connect(null, actions)(Tale); 
  </code></pre>
  
  <p>I set the data via the following action:</p>
  
  <pre><code>export function fetchTale(id){
  return function(dispatch){
      axios.get(`${ROOT_URL}/tale`, {params: {id: id}}).then(function(response) {
          localStorage.setItem('fishTail', JSON.stringify(response.data));
      })
  }
  };
  </code></pre>
  
  <p>The problem lies in that the ShowTale component, below, does not render the correct data. It renders the correct data on  the first instance upon starting the application, but on subsequent requests, it renders the previous data. For example: I'll start the app, click on picture 1  renders 1, click on picture 2 renders 1, click on picture 3 renders 2, and so on. The data on localStorage is being correctly updates, but it appears the component is grabbing the data from localStorage before it is updated by the action. </p>
  
  <pre><code>class ShowTale extends Component {
  constructor(props){
      super(props)
  
      this.state = {tale: JSON.parse(localStorage.getItem('fishTail'))}
  }
  
  componentWillMount(){
      this.setState = JSON.parse(localStorage.getItem('fishTail'));
  }
  
  renderTale(){
      const tale = this.state.tale;
      console.log('the tale: ', tale);
      const {title, story, picture, author} = tale;
  
      return (
          &lt;div className="thumbnail"&gt;
              &lt;img className="image-responsive" src={picture}/&gt;
              &lt;div className="caption-full"&gt;
                  &lt;h4&gt;{title}&lt;/h4&gt;
                  &lt;p&gt;{story}&lt;/p&gt;
                  &lt;p&gt;&lt;em&gt;Submitted by: {author}&lt;/em&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  render() {
      return(
          &lt;div className="container showTale"&gt;
              &lt;div className="row"&gt;
                  &lt;div className="col-sm-12"&gt;
                      {this.renderTale()}
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  };
  
  export default ShowTale;
  </code></pre>
  
  <p>Any assistance with getting the pictures to show in sync with the data in localStorage will be greatly appreciated!</p>