title: React / Redux - Cannot read property "XXX" of undefined
body: <p>This is something I have been stuck on for over 2 weeks, so this question is my final chance at figuring this out. I hope anyone can help me (as the problem is most likely something small / something I have missed)</p>
  
  <hr>
  
  <p>Using Node, Redux and React, I am returning a collection from my Mongo database.
  I am using react-redux "connect" to retrieve my data from my store As seen in my JSX below.</p>
  
  <p><strong>JSX:</strong></p>
  
  <pre><code>import React from "react";
  import {connect} from "react-redux"
  import {fetchArticle} from "../../actions/articleActions"
  var classNames = require('classnames');
  import GlobalHero from '../modules/GlobalHero.jsx';
  
  @connect((store) =&gt; {
      return {article: store.article.article, fetching: store.article.fetching};
  })
  
  export default class Article extends React.Component {
  
      // BEFORE COMPONENT RENDER (For Everyhing else)
      constructor() {
          super();
          //sets initial state
          this.state = {
              page: "Article"
          };
      }
  
      // BEFORE COMPONENT RENDER (For Ajax / Dispatcher Events): get article Title / Thumbnail rows based on this.props.indexLimit
      componentWillMount = () =&gt; {
          console.log(this.props)
          this.props.dispatch(fetchArticle(this.props.params.id))
      }
  
      // ON COMPONENT RENDER
      componentDidMount = () =&gt; {}
  
      render() {
  
          if (this.props.fetching) {
              return (
                  &lt;p&gt;Loading...&lt;/p&gt;
              );
          } else {
              return (
                  &lt;div&gt;
                      &lt;h1&gt;{this.props.article.title}&lt;/h1&gt;
                      &lt;h2&gt;{this.props.article.subTitle}&lt;/h2&gt;
  
                  &lt;/div&gt;
              );
          }
      }
  }
  </code></pre>
  
  <p><strong>My problem:</strong></p>
  
  <p>So when I return "title" and "subTitle" in my JSX, it pulls everything through perfectly fine (see below):</p>
  
  <pre><code>  &lt;h1&gt;{this.props.article.title}&lt;/h1&gt;
    &lt;h2&gt;{this.props.article.subTitle}&lt;/h2&gt;
  </code></pre>
  
  <p>The data is also visible on my screen (see below):</p>
  
  <blockquote>
    <p><a href="https://i.stack.imgur.com/V4ToL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/V4ToL.png" alt="enter image description here"></a></p>
  </blockquote>
  
  <p>But... As soon as I add:</p>
  
  <pre><code>  &lt;h3&gt;{this.props.article.body.section1.text}&lt;/h3&gt;
  </code></pre>
  
  <p>My page will not load, and my console returns:</p>
  
  <blockquote>
    <p>Cannot read property 'section1' of undefined</p>
  </blockquote>
  
  <p>When I look at the state of my returned data in the console:</p>
  
  <blockquote>
    <p><a href="https://i.stack.imgur.com/SHMHp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SHMHp.png" alt="enter image description here"></a></p>
  </blockquote>
  
  <p>As you can see, it returns 'section1' in the console, so I must be calling my 'section1' wrong in my JSX?</p>
  
  <p>I'm thinking the problem may be to do with the fact that 'section1' is nested further into my mongo db collection than 'title' or 'subTitle' is.</p>
  
  <p>Below I will show you the rest of my routes for this page - I have looked endlessly online and cannot pinpoint my problem.</p>
  
  <p><strong>Action:</strong></p>
  
  <pre><code>import axios from "axios";
  //var resourceUrl = "http://localhost:7777/api/schools";
  
  export function fetchArticle(id) {
  
      return function(dispatch) {
          dispatch({
              type: "FETCH_ARTICLE"
          })
          axios.get('/api/article', {
                  params: {
                      id: id
                  }
              })
              .then((response) =&gt; {
                  dispatch({
                      type: "FETCH_ARTICLE_FULFILLED",
                      payload: response.data
                  })
              })
              .catch((err) =&gt; {
                  dispatch({
                      type: "FETCH_ARTICLE_REJECTED",
                      payload: err
                  })
              })
      }
  }
  </code></pre>
  
  <p><strong>Reducer:</strong></p>
  
  <pre><code>export default function reducer(state = {
      article: [],
      fetching: false,
      fetched: false,
      error: null,
  }, action) {
  
      switch (action.type) {
          case "FETCH_ARTICLE":
              {
                  return {
                      ...state,
                      fetching: true
                  }
              }
          case "FETCH_ARTICLE_REJECTED":
              {
                  return {
                      ...state,
                      fetching: false,
                      error: action.payload
                  }
              }
          case "FETCH_ARTICLE_FULFILLED":
              {
                  return {
                      ...state,
                      fetching: false,
                      fetched: true,
                      article: action.payload,
                  }
              }
      }
      return state
  }
  </code></pre>
  
  <p><strong>Store:</strong></p>
  
  <pre><code>import {
      applyMiddleware,
      createStore
  } from "redux"
  
  import logger from "redux-logger"
  import thunk from "redux-thunk"
  import promise from "redux-promise-middleware"
  
  import reducer from "./reducers"
  
  const middleware = applyMiddleware(promise(), thunk, logger())
  
  export default createStore(reducer, middleware)
  </code></pre>
  
  <p><strong>Node / Express Call:</strong></p>
  
  <pre><code>app.get('/api/article', (req, res) =&gt; {
  
      var ObjectId = require('mongodb').ObjectID;
      var articles;
  
      db.collection('articles')
          .findOne({
              "_id": ObjectId("58c2a5bdf36d281631b3714a")
          })
          .then(result =&gt; {
              articles = result;
          }).then(() =&gt; {
              res.send(articles);
          }).catch(e =&gt; {
              console.error(e);
          });
  
  });
  </code></pre>
  
  <p><strong>The Record in my mongo DB collection:</strong></p>
  
  <pre><code>{
      "_id": {
          "$oid": "58c2a5bdf36d281631b3714a"
      },
      "title": "EntertheBadJah",
      "subTitle": "Lorem ipsum dolor",
      "thmbNailImg": "",
      "headerImg": "",
      "body": {
          "section1": {
              "include": true,
              "text": "Lorem ipsum dolor sit amet, dico posse integre cum ut, praesent iudicabit tincidunt te sea, ea populo semper laoreet duo."
          },
          "section2": {
              "include": true,
              "text": "Lorem ipsum dolor sit amet, dico posse integre cum ut, praesent iudicabit tincidunt te sea, ea populo semper laoreet duo."
          },
          "bodyImg": {
              "include": true,
              "img": ""
          },
          "section3": {
              "include": true,
              "text": "Lorem ipsum dolor sit amet, dico posse integre cum ut, praesent iudicabit tincidunt te sea, ea populo semper laoreet duo."
          }
      },
      "links": {
          "recourse": {
              "include": false,
              "text": "Go watch their interview",
              "link": ""
          },
          "soundcloud": {
              "include": true,
              "link": "www.soundcloud.com/BadJah"
          },
          "spotify": {
              "include": false,
              "link": ""
          },
          "youtube": {
              "include": false,
              "link": ""
          },
          "twitter": {
              "include": false,
              "link": ""
          },
          "facebook": {
              "include": false,
              "link": ""
          },
          "instagram": {
              "include": false,
              "link": ""
          }
      },
      "keywords": "Badjah",
      "date": "",
      "author": "Aagentah",
      "dateAdded": "2017-06-01T00:00:00.000Z"
  }
  </code></pre>
  
  <hr>
  
  <p>Any help or advice on this problem is appreciated - thank you in advance.</p>