An array with objects, within an object is undefined

Question

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>
    );
  }
}

Can you post some more code? At least the code which actually triggers the error. — Mathyn
– Mathyn, Commented Jan 23, 2019 at 12:45
More code needed. Please also tell how that object was created and if there are any async operations run for changing this object — Artem Arkhipov
– Artem Arkhipov, Commented Jan 23, 2019 at 12:47

Dimitar Christoff · Accepted Answer · 2019-01-23 14:04:29Z

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.

edited Jan 23, 2019 at 14:04

answered Jan 23, 2019 at 13:58

Dimitar Christoff

26.1k8 gold badges53 silver badges69 bronze badges

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

1 Comment

zeitmeister Over a year ago

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

Sultan H. · Accepted Answer · 2019-01-23 13:06:09Z

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]);

answered Jan 23, 2019 at 13:06

Sultan H.

2,9383 gold badges14 silver badges23 bronze badges

1 Comment

Sultan H. Over a year ago

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

Bayu · Accepted Answer · 2019-01-23 13:00:53Z

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().

answered Jan 23, 2019 at 13:00

Bayu

2,7141 gold badge30 silver badges34 bronze badges

6 Comments

zeitmeister Over a year ago

That prints object

Bayu Over a year ago

What if you try console.log( Object.keys( ( this.state.data ) ) ? what the output?. We should expect [ "answer", "createdAt" , ...].

zeitmeister Over a year ago

Yes, the expected output is printed out in the console.

Bayu Over a year ago

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.

Bayu Over a year ago

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] )

|

cross19xx · Accepted Answer · 2019-01-23 13:02:20Z

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

answered Jan 23, 2019 at 13:02

cross19xx

3,5072 gold badges28 silver badges41 bronze badges

Collectives™ on Stack Overflow

An array with objects, within an object is undefined

4 Answers 4

1 Comment

1 Comment

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related