can't access array of objects in object

Question

I'm baffled about why I'm getting an error when trying to access an array inside of an object in ReactJS.

I am using Redux to store an object in State.

I have a success function that allows the page to render, so by the time I get to this object it has for sure loaded. (I noticed a ton of similar questions to this where that's usually the problem).

When I do this I get the proper results:

const { events } = this.props
console.log(JSON.stringify(events.listSignup))

{"data":[{"eventID":"264712106049274377","name":"BookOne","email":null,"verify":null,"privacy":null,"order":null,"group":null},{"eventID":"264712106049274377","name":"BookTwo","email":null,"verify":null,"privacy":null,"order":null,"group":null}]}

I can see that the array "data" exists, but when I try:

    console.log(JSON.stringify(events.listSignup.data[0].name))

or

    console.log(JSON.stringify(events.listSignup.data[0]))

I get "TypeError: Cannot read property 'data' of undefined"

I'm at my wits end trying to figure out what's going on. Any advice would be much appreciated!

If you're getting that JSON from that console.log statement, events.listSignup.data[0].name is absolutely correct, so these statements must be separated from one another in some way such that events.listSignup's value or contents change before the second statement you're doing, otherwise the second one would be working. Please update your question with a minimal reproducible example demonstrating the problem, ideally a runnable one using Stack Snippets (the [<>] toolbar button). Stack Snippets support React, including JSX; here's how to do one. — T.J. Crowder
– T.J. Crowder, Commented May 6, 2020 at 9:33
if you can, it'd be more useful to put a breakpoint in your browser debugger and watch. my best guess is that you've a first render with no data, and a second with data. — y_nk
– y_nk, Commented May 6, 2020 at 9:34
Seconding what @y_nk said, that's the usual reason. If you look in the console, you'll probably find a previous (or subsequent) output from that console.log(JSON.stringify(events.listSignup)) that doesn't have the data, and it's there you're getting the problem. — T.J. Crowder
– T.J. Crowder, Commented May 6, 2020 at 9:35
on a non-directly-related matter, but still. it's usually not a good practice to pass nested data structures into your component like this. you may want to go straight to the point and provide useful data without exploring a substructure, in case that data structure changes. try to evolve your component to consume directly "events.listSignup.data" as a prop of your component. doing so will enable elegant defaultProps (an empty array) and also a ternary statement on upper level to avoid displaying the component if no data (which is a pretty common usage) — y_nk
– y_nk, Commented May 6, 2020 at 9:40

Ed_ · Accepted Answer · 2020-05-06 09:37:17Z

1

You're right to be baffled, because what you [think you] have observed isn't possible.

This happens a lot to me as a developer, and my advice is that when this happens, trust your knowledge (you know this isn't possible!) and double check what you are seeing.

I suspect that the first time your component renders, this.props.events is undefined, but then it very quickly re-renders with this.props.events being set.

I would suggest adding back this line (without the others):

console.log(JSON.stringify(events.listSignup))

And scrolling up in your javascript console to see if you have any logs that are just displaying undefined. If so, you probably need to double check the logic which is preventing the page from rendering before you have successfully received the data, as I suspect that is where your problem is.

answered May 6, 2020 at 9:37

Ed_

19.2k8 gold badges48 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Myka Over a year ago

Ok, so there is a first one running where it outputs "Undefined", I guess I was just staring at it so long (and it's 3am) I just missed it. I'm still not sure how it's running early, but I guess I know where to start to frustratingly look tomorrow. Thanks for the quick response!

Myka Over a year ago

Fixed it. The problem is that I forgot to return "...state" first in my new redux reducer so it was wiping out all my data when called X-x Bonehead 3am mistake. Thanks for the help, I would've gone mad without you pointing this out.

Ed_ Over a year ago

Glad you got it sorted! Sounds like a very easy mistake to make!

Collectives™ on Stack Overflow

can't access array of objects in object

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related