2

I have an array that contains objects, inside an object. I can console.log the first object and the array, but when i try to access the objects within the array or use the map-function on the array i get an error that says "Can't read property of undefined".

I have thoroughly searched SO and other sites for similar problems and found some but no answers seems to work for me.

The object looks like this:

{ answers: [{…}], createdAt: "2019-01-23T10:50:06.513Z", nested: {kebab: "jjjj", sås: 2, sallad: "kkk"}, text: "weaxcc", /* etc... */ }

And i can access it using: this.state.data

I want to access objects inside the answers-array like:

this.state.data.answers[0].text

or even :

this.state.data.answers.map().....

But that gives me 'Cannot read property '0' of undefined. The answers-array is not empty.

Any help is appreciated!

EDIT This is how the objects ends up in my state. 

getQuestionFromDb = () => { axios.get(`http://localhost:3000/questions/${this.state.id}`) .then(res => this.setState({ data: res.data })); };

This function is called in the ComponentDidMount()-method.

Here is my render function (the console.log is causing the error): 

render() { return ( <div className="main-content"> <h2>{this.state.data.text} </h2> {console.log(this.state.data.answers[0].text)} <p>Introducing <strong>{this.state.id}</strong>, a teacher who loves teaching courses about <strong>{this.state.id}</strong>!</p> <input type="text" onChange={e => this.setState({ message: e.target.value })}> </input> <button onClick={() => {this.handleAnswerPost(this.state.message)}}>Answer</button> </div> ); } }
Improve this question
4
  • 1
    can you provide the exact object Commented Jan 23, 2019 at 12:45
  • 1
    Can you please post full code example Commented Jan 23, 2019 at 12:45
  • 1
    Can you post some more code? At least the code which actually triggers the error. Commented Jan 23, 2019 at 12:45
  • 1
    More code needed. Please also tell how that object was created and if there are any async operations run for changing this object Commented Jan 23, 2019 at 12:47

4 Answers 4

Reset to default
3

componentDidMount is getting called when your component becomes part of the DOM but the call you do to populate your state is async due to XHR, which may take 100-300ms more to get the data in your component, so this.state.data.answers won't be available in the initial render() cycle.

since you mentioned using a loop, I suggest setting an initial state shape like 

this.state = { data: { answers: [] } }

your initial render won't have anything to loop but as soon as it resolves the data and sets the new state, it will render correctly.

alternatively you can 

return this.state.data.answers.length ? loopItemsHere : <div>Loading..</div>

obviously, loopItemsHere can be anything you write to show the answers.

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

1 Comment

Thank you, this really helped! But how come i can access the "outer" parts of the object and not the nested 'answers'-array?
1

This might not be working when data doesnt contain answers[] at the very first mount for a component.

You may wanna check for your array's existance as following:

const { data } = this.state; data.hasOwnProperty('answers') && console.log(data.answers[0]);
Improve this answer

1 Comment

the problem is that your initial state doesnt have data.answers inside of it. this is only one way to solve it.
0

The reason we can't access object key in Javascript, usually it is because the variable/value is not the type of Object. Please ensure that this.state.data type is Object. You can try to console.log( typeof this.state.data ). We should expect that it is output object. If the type is string, you should parse it first with JSON.parse().

Improve this answer

6 Comments

That prints object
What if you try console.log( Object.keys( ( this.state.data ) ) ? what the output?. We should expect [ "answer", "createdAt" , ...].
Yes, the expected output is printed out in the console.
Have no idea if "answer" key exist but throw error undefined when it accessed. Maybe you should reconstruct some part of your code to codesandbox.io or jsbin.com. So people can help you better.
Or you can do conditional check before accessing it by this.state.data.answers && this.state.data.answers.length && console.log( this.state.data.answers[0] )
|
0

There may be a number of reasons that could cause the data object not to be shown:

  • The object was not in state at the time of it being called. This may be caused by an async operator not loading in the data. E.g. if you are requesting for the object from the database, chances are that at the time of making a call to retrieve the data (this.state.data), the response had not been given.

  • The object may not have been parsed into string. Try running console.log(typeof this.state.data). If the output is string, then you may have to parse it. If the output is undefined, then point one is valid

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.