Accessing json data entry using props gives error: undefined is not an object-CodePudding

I am trying to access the data of a separate JavaScript file named data.js below using props.

export default {
    "decks": [
        {
            "deckName" : "My Progress",
            "deckPictureURL" : "https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg",
            "cards": 
            [
                {
                    "userId" : "23c9xfc",
                    "userName" : "Williamsun0908",
                    "userDisplayName" : "WilliamPig",
                    "profilePictureURL" : "https://media.wired.com/photos/598e35fb99d76447c4eb1f28/16:9/w_2123,h_1194,c_limit/phonepicutres-TA.jpg",
                    
                    "cardInformation" : 
                    {
                        "cardDisplayPictureURL" : "https://www.planetware.com/wpimages/2020/02/france-in-pictures-beautiful-places-to-photograph-eiffel-tower.jpg",
                        "cardDisplayTags" : ["bedroom", "long-term", "cheap", "student"],
                        "cardPublishDate" : 
                        {
                            "year" : "2022",
                            "month" : "06",
                            "day" : "15",
                            "hour" : "10",
                            "minute" : "25"
                        }
                    }            
                },

                {
                    "userId" : "63a152f",
                    "userName" : "Zacyoutube",
                    "userDisplayName" : "ZacPig",
                    "profilePictureURL" : "https://ichef.bbci.co.uk/news/999/cpsprodpb/15951/production/_117310488_16.jpg",

                    "cardInformation" :
                    {
                    "cardDisplayPictureURL" : "https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg",
                    "cardDisplayTags" : ["apartment", "group", "student"],
                    "cardPublishDate" : 
                        {
                        "year" : "2022",
                        "month" : "05",
                        "day" : "13",
                        "hour" : "5",
                        "minute" : "22"
                        }
                    }
                }
            ]
        }
    ]
}

I define the component in another jsx file to be

const DeckProfileImage = (props) =>{

    return  <div className="deck-profile-image">
                <img alt="none" src={props.data.decks[props.deckNumber].deckPictureURL} width="100%" height="100%"></img>
            </div>

}

And I can use the DeckProfileImage component through

import Data from ‘data.js’
< DeckProfileImage data={Data} deckNumber="0"/>

Then I expect to access the data entry in the AccessData component by assigning props.data equal to the exported data set. But I’m getting the error:

TypeError: undefined is not an object (evaluating 'data.decks[props.deckNumber].deckPictureURL')

CodePudding user response：

Write like the following: Data.js file,

const Data = {
  array: ["1", "2"]
}

export default Data;

After that another file will be something like this,

import Data from "./Data"
import AccessData from "./AccessData"

export default function DataFile(){
  return <>
    <AccessData data={Data}/>
  </>
}

Then the component file will be like the following,

export default function AccessData(props){
  const {data} = props;
  return <div>{data.array[0]}</div>
}

Hope this helps

CodePudding user response：

From what I'm seeing you're exporting an object with no name/identifier