An object within an object in React state returns undefined

Question

There is something that I just can't figure out. Here is a basic React class-based component fetching some data from an endpoint:

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  state = { info: {} };

  componentDidMount() {
    fetch('https://api.spacexdata.com/v2/info')
      .then(response => response.json())
      .then(data => {
        const info = data;
        this.setState(() => ({ info }));
      });
  }

  render() {
    return (
      <div>
        {/* the first h1 renders just fine */}
        <h1>{this.state.info.name}</h1>
        {/* the second throws an error: Cannot read property 'address' of undefined */}
        <h1>{this.state.info.headquarters.address}</h1>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

Why is the second h1 tag giving me undefined??? I check the state in the react dev tools and the data is there... It is literally an object that has another object within it... If I copy paste that same object into the state it renders just fine...

you are sure that info.name is there? what is the value of name? — Tomasz Mularczyk
– Tomasz Mularczyk, Commented Mar 18, 2018 at 15:10
@Tomasz Yes... just copy paste the url into a browser and you’ll see... it’s just on object. Seem only the nested object within it throws an error... — SakoBu
– SakoBu, Commented Mar 18, 2018 at 20:57

Victor Ribeiro da Silva Eloy · Accepted Answer · 2018-03-18 15:11:22Z

1

The problem is the async nature of the promises, when you first render the component you start the promise but it will take some time to execute and resolve, so it didn't return the JSON yet.This means that info still being {} and when you try to render your H1

<h1>{this.state.info.headquarters.address}</h1>

you will get the undefined error. Because this.state.info.headquarters is undefined so you cannot access .address until the promise resolves(remember they are async)

just replace your initial state with this one(or something similar)

state = { info: {headquarters:{address:'loading...'} };

and you will be fine.

answered Mar 18, 2018 at 15:11

Victor Ribeiro da Silva Eloy

4,1793 gold badges30 silver badges34 bronze badges

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

3 Comments

SakoBu Over a year ago

Then why does the first H1 render? Only when trying to render the second does it throw the undefined error...

Victor Ribeiro da Silva Eloy Over a year ago

Because in the first one you have the object info. And when you try to access name it returns unrefined. What is fine. Only when you try to go down one more level you get the error. Because then you are trying to access an property of undefined, and this causes the error.

SakoBu Over a year ago

Got it. I actually did {this.state.info.headquareters ? this.state.info.headquarters.address : ‘Loading...’ }

Collectives™ on Stack Overflow

An object within an object in React state returns undefined

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