Home » Javascript » React JS Access Data JSON via props

React JS Access Data JSON via props

Posted by: admin November 1, 2017 Leave a comment

Questions:

My data is currently in a JSON format and is successfully being populated to props called foxFooterData.

When I console.log foxFooterData.data you see the following: enter image description here

I’m trying to access the foxFooterCopyright text you see within the object.

I thought doing {this.props.foxFooterData.data.foxFooterCopyright} would work but no luck.

Here is also a true representation of the data as it’s coming through:

enter image description here

EDIT – Updating with extra code:

Reducer:

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

}

Action:

import axios from 'axios';

export function fetchFoxFooterData() {
    return function(dispatch) {
        axios.get('http://localhost:8888/public/api/globals/foxFooterLegal.json')
        .then((response) => {
            dispatch({type: "FETCH_FOXFOOTER_DATA_COMPLETE", payload: response.data})
        })
        .catch((err) => {
            dispatch({type: "FETCH_FOXFOOTER_DATA_FAILED", payload: err})
        })
    }
}

Container Component:

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) => {
    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 (
            <div className="ad-products-wrap container no-padding col-xs-12">
                <Header />
                <HeroModule />
                <HeroDetail />
                <ProductCategoryLeft />
                <ProductCategoryNavigation />
                <ProductCategoryRight />
                <ShowcaseModule />
                <NewsModule />
                <ContactModule />
                <Footer />
            </div>
        )
    }
}

export default AdProducts
Answers:

Keep in mind the full path as well it being case-sensitive.

this.props.FoxFooterData.data.data[0].foxFooterCopyright

Questions:
Answers:

Based on your graphic, the full object path to the foxFooterCopyright key is:

this.props.FoxFooterData.data.data[0].foxFooterCopyright

Questions:
Answers:

add this life cycle hook to your code, will be triggered as soon as your props are injected to your component

componentWillReceiveProps(newProps){
 if(newProps.foxFooterData && newProps.foxFooterData.data && 
   newProps.foxFooterData.data.length){

   console.log("DATA", this.props.foxFooterData.data[0].foxFooterCopyright);

 }

}