title: Access nested object in react
body: <p>I have the following data structure:</p>
  
  <pre><code>{
      "_id" : ObjectId("5749cb4d42f5b8a18912e8c3"),
      "language" : "en-gb",
      "definitions" : {
          "mobileMenuLabel" : "menu",
          "copyright" : "© 2016 Alexander Ward"
      }
  }
  </code></pre>
  
  <p>In a react component I'm attempting to render out the copyright text. The component will happily show me what is in 'language' but every time I try to access anything inside 'definitions' I get an error telling me that definitions is undefined.</p>
  
  <p>Here is my component:</p>
  
  <pre><code>import React from 'react';
  import Navigation from './nav.jsx'
  import { connect } from 'react-redux';
  import { languagesLoad } from '../../scripts/actions';
  
  export default class Footer extends React.Component {
    componentWillMount() {
      const { dispatch } = this.props;
      dispatch(languagesLoad());
    }
  
    render() {
      const { languages } = this.props
      if(languages.isFetching) {
        return(
          &lt;section class="loader"&gt;
            &lt;span&gt;Content is loading...&lt;/span&gt;
          &lt;/section&gt;
        )
      } else {
        const definitions = languages.items.definitions;
        return(
          &lt;footer class="c-global-footer"&gt;
            &lt;div class="wrapper"&gt;
              &lt;Navigation postion="footer" /&gt;
              &lt;div class="c-global-footer_copyright"&gt;
                { definitions.copyright }
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/footer&gt;
        )
      }
    }
  }
  
  function select(state) {
    const { languages } = state;
    return {
      languages
    };
  }
  
  export default connect(select)(Footer);
  </code></pre>
  
  <p>And here is the reducer the data is pulled in from:</p>
  
  <pre><code>export function languages(state = initialState, action) {
    switch (action.type) {
      case GET_LANG :
        return Immutable(state).merge({
          items: action.payload.languages,
          isFetching: false
        })
      case REQUEST_LANG :
        return Immutable(state).merge({
          isFetching: true
        })
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>Here is the action which the reducer uses:</p>
  
  <pre><code>// Language
  export function requestLanguages() {
    return {
      type: REQUEST_LANG
    };
  }
  
  export function getLanguages(json) {
    return {
      type: GET_LANG,
      payload: {
        languages: json,
        receivedAt: Date.now()
      }
    };
  }
  
  // thunk actions
  export function languagesLoad(pageName) {
    return dispatch =&gt; {
      dispatch(requestLanguages());
      return axios.get(API_ROOT + 'lang/en-gb')
        .then(function(response) {
          dispatch(getLanguages(response.data))
        })
    }
  }
  </code></pre>