title: Cannot read property 'code' of undefined at Constructor.render (Photo.js:14)
body: <p>So this issue is caused directly after a browser (page) reload, and follows 4 distinct steps.</p>
  
  <ol>
  <li>'Load Posts has been fired (actionCreators.js:26) - This is an asynchronous thunk call to firebase':</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>// fetch posts
  export function fetchPosts() {
    console.log("Load Posts has been fired");
    return dispatch =&gt; {
      Posts.on('value', posts =&gt; {
        dispatch({
          type: 'FETCH_POSTS',
          payload: posts.val()
        });
      });
    };
  }</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="2">
  <li>'Load Comments has been fired  (actionCreators.js:39) - This is an asnychronous thunk call to firebase':</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>// fetch comments
  export function fetchComments() {
    console.log("Load Comments has been fired");
    return dispatch =&gt; {
      Comments.on('value', comments =&gt; {
        dispatch({
          type: 'FETCH_COMMENTS',
          payload: comments.val()
        });
      });
    };
  }
  
  Note: firebase call in actioncreators.js
  
  import * as firebase from 'firebase';
  
  //Firebase configuration details and initialisation
  import { Firebase_Config } from '../data/config';
  firebase.initializeApp(Firebase_Config);
  const rootRef = firebase.database();
  const Posts = rootRef.ref('posts');
  const Comments = rootRef.ref('comments');</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="3">
  <li>'Uncaught TypeError: Cannot read property 'code' of undefined'</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>at Constructor.render (Photo.js:14)
  at Constructor.tryRender [as render] (index.js:34)
  at Constructor.proxiedMethod [as render] (createPrototypeProxy.js:44)
  at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:587)
  at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:607)
  at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (ReactPerf.js:66)
  at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:220)
  at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
  at Object.mountComponent (ReactReconciler.js:37)
  at ReactDOMComponent.mountChildren (ReactMultiChild.js:241)
  at ReactDOMComponent._createContentMarkup (ReactDOMComponent.js:591)
  at ReactDOMComponent.mountComponent (ReactDOMComponent.js:479)
  at Object.mountComponent (ReactReconciler.js:37)
  at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
  at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
  at Object.mountComponent (ReactReconciler.js:37)
  at ReactDOMComponent.mountChildren (ReactMultiChild.js:241)
  at ReactDOMComponent._createContentMarkup (ReactDOMComponent.js:591)
  at ReactDOMComponent.mountComponent (ReactDOMComponent.js:479)
  at Object.mountComponent (ReactReconciler.js:37)
  at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
  at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
  at Object.mountComponent (ReactReconciler.js:37)
  at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
  at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
  at Object.mountComponent (ReactReconciler.js:37)
  at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
  at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
  at Object.mountComponent (ReactReconciler.js:37)
  at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
  at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
  at Object.mountComponent (ReactReconciler.js:37)
  at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
  at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
  at Object.mountComponent (ReactReconciler.js:37)
  at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
  at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
  at Object.mountComponent (ReactReconciler.js:37)
  at mountComponentIntoNode (ReactMount.js:266)
  at ReactReconcileTransaction.perform (Transaction.js:136)
  at batchedMountComponentIntoNode (ReactMount.js:282)
  at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:136)
  at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
  at Object.batchedUpdates (ReactUpdates.js:94)
  at Object._renderNewRootComponent (ReactMount.js:476)
  at Object.wrapper [as _renderNewRootComponent] (ReactPerf.js:66)
  at Object._renderSubtreeIntoContainer (ReactMount.js:550)
  at render (ReactMount.js:570)
  at wrapper (ReactPerf.js:66)
  at Object.&lt;anonymous&gt; (reduxstagram.js:37)</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="4">
  <li>The page data now successfully loads and is rendered to the browser</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>[HMR] connected (client.js: 67)
  comments.js:23 FETCH_COMMENTS triggered (comments.js:23)</code></pre>
  </div>
  </div>
  </p>
  
  <p>The code for Photo.js is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React from 'react';
  import Comments from './Comments';
  import CSSTransitionGroup from 'react-addons-css-transition-group';
  import { Link } from 'react-router';
  
  const Photo = React.createClass({
    propTypes: {
        post: React.PropTypes.object,
        comments: React.PropTypes.object,
        i: React.PropTypes.string
    },
    getDefaultProps: function() {
        return {
          post: {
            caption: '',
            code: '-1rhFawccs',
            display_src: 'https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e35/12331333_1650987978502155_1162510634_n.jpg',
            likes: 0
          },
          comments: {
            text: 'One flew over the cuckoos nest',
            user: 'Tracey Summers'
          },
          i: '1'
        };
    },
    render() {
      const { post, i, comments } = this.props;
      return (
        &lt;figure key={i} className="grid-figure"&gt;
  
          &lt;div className='grid-photo-wrap'&gt;
            &lt;Link to={`/view/${post.code}`}&gt;
              &lt;img className='grid-photo' src={post.display_src} alt={post.caption} /&gt;
            &lt;/Link&gt;
  
            &lt;CSSTransitionGroup transitionName="like" transitionEnterTimeout={500} transitionLeaveTimeout={500}&gt;
              &lt;span key={post.likes} className="likes-heart"&gt;{post.likes}&lt;/span&gt;
            &lt;/CSSTransitionGroup&gt;
  
          &lt;/div&gt;
  
         &lt;figcaption&gt;
            &lt;p&gt;{post.caption}&lt;/p&gt;
  
            &lt;div className="control-buttons"&gt;
              &lt;button onClick={this.props.increment.bind(null,i)} className="likes"&gt;&amp;hearts; {post.likes}&lt;/button&gt;
  
              &lt;Link to={`/view/${post.code}`} className="button"&gt;
                &lt;span className="comment-count"&gt;
                  &lt;span className="speech-bubble"&gt;&lt;/span&gt;     {(comments[post.code] ? Object.keys(comments[post.code]).length : 0)}
                &lt;/span&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
  
          &lt;/figcaption&gt;
  
        &lt;/figure&gt;
      )
    }
  });
  
  export default Photo;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The main component Photo.js is included in</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React from 'react';
  import Photo from './Photo';
  import Comments from './Comments';
  
  const Single = React.createClass({
  
    render() {
       const i  = this.props.params.postId;
       const posts = this.props.posts;
  
      return (
        &lt;div className="single-photo"&gt;
          &lt;Photo key={i} i={i} post={posts[i]} {...this.props} /&gt;
          &lt;Comments {...this.props} postId={i} /&gt;
        &lt;/div&gt;
      );
    }
  });
  
  export default Single;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I resolve this issue?</p>