title: React JS Access Data JSON via props
body: <p>My data is currently in a JSON format and is successfully being populated to props called <code>foxFooterData</code>. </p>
  
  <p>When I console.log foxFooterData.data you see the following: <a href="https://i.stack.imgur.com/8htNG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8htNG.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to access the foxFooterCopyright text you see within the object. </p>
  
  <p>I thought doing <code>{this.props.foxFooterData.data.foxFooterCopyright}</code> would work but no luck. </p>
  
  <p>Here is also a true representation of the data as it's coming through: </p>
  
  <p><a href="https://i.stack.imgur.com/7dRCh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7dRCh.png" alt="enter image description here"></a></p>
  
  <p>EDIT - Updating with extra code:</p>
  
  <p>Reducer: </p>
  
  <pre><code>export default function reducer(state={
      data: {},
      fetching: false,
      fetched: false,
      error: null,
  }, action) {
      switch (action.type) {
          case "FETCH_FOXFOOTER_DATA": {
              return {...state, fetching: true}
          }
          case "FETCH_FOXFOOTER_DATA_COMPLETE": {
              return {
                  ...state,
                  fetching: false,
                  fetched: true,
                  data: action.payload
              }
          }
          case "FETCH_FOXFOOTER_DATA_FAILED": {
              return {...state, fetching: false, error: action.payload}
          }
      }
  
      return state
  
  }
  </code></pre>
  
  <p>Action: </p>
  
  <pre><code>import axios from 'axios';
  
  export function fetchFoxFooterData() {
      return function(dispatch) {
          axios.get('http://localhost:8888/public/api/globals/foxFooterLegal.json')
          .then((response) =&gt; {
              dispatch({type: "FETCH_FOXFOOTER_DATA_COMPLETE", payload: response.data})
          })
          .catch((err) =&gt; {
              dispatch({type: "FETCH_FOXFOOTER_DATA_FAILED", payload: err})
          })
      }
  }
  </code></pre>
  
  <p>Container Component: </p>
  
  <pre><code>import React from 'react';
  import {connect} from 'react-redux';
  import {bindActionCreators} from 'redux';
  
  //Actions
  import {fetchAdProductsData} from '../../actions/adProductsActions';
  import {fetchListAdProductData} from '../../actions/listAdProductsActions';
  import {fetchFoxFooterData} from '../../actions/foxFooterActions';
  
  //Components
  import Header from '../../components/Header';
  import HeroModule from '../../components/HeroModule';
  import ProductCategoryLeft from '../../components/ProductCategoryLeft';
  import ProductCategoryRight from '../../components/ProductCategoryRight';
  import ProductCategoryNavigation from '../../components/ProductCategoryNavigation';
  import HeroDetail from '../../components/HeroDetail';
  import ShowcaseModule from '../../components/ShowcaseModule';
  import NewsModule from '../../components/NewsModule';
  import ContactModule from '../../components/ContactModule';
  import Footer from '../../components/Footer';
  
  @connect((store) =&gt; {
      return {
          listAdProductsData: store.ListAdProductsData.data,
          adProductsData: store.AdProductsData.data,
          foxFooterData: store.FoxFooterData.data
      }
  })
  
  class AdProducts extends React.Component {
  
      componentWillMount() {
          //Fetch Ad Products Data
          //this.props.dispatch(fetchAdProductsData())
  
  
          //Fetch List Ad Products Data
          this.props.dispatch(fetchListAdProductData())
  
          //Fetch Fox Footer Data
          this.props.dispatch(fetchFoxFooterData())
  
      }
  
      render() {
          console.log("DATA", this.props.foxFooterData.data.data[0].foxFooterCopyright);
          return (
              &lt;div className="ad-products-wrap container no-padding col-xs-12"&gt;
                  &lt;Header /&gt;
                  &lt;HeroModule /&gt;
                  &lt;HeroDetail /&gt;
                  &lt;ProductCategoryLeft /&gt;
                  &lt;ProductCategoryNavigation /&gt;
                  &lt;ProductCategoryRight /&gt;
                  &lt;ShowcaseModule /&gt;
                  &lt;NewsModule /&gt;
                  &lt;ContactModule /&gt;
                  &lt;Footer /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default AdProducts
  </code></pre>