can't access object's properties within object in react

Question

I can't seem to access data that's part of an object within an object. here I'm trying to access likes in profile which would otherwise be fine using vanilla javascript to print out this.state.data.profile.likes

class App extends Component {
     constructor(props) {
        super(props);
        this.state = {
            data: {}
        };
     }

     componentDidMount() {
         var x = {      
             "notifications": 12,
             "profile": {
                 "likes": 5
             }
         };
         this.setState({
             data: x
         });
     }


    render() {
        const {notifications, profile} = this.state;
        return (
            <div>
                <span>Notifications {notifications}</span>
                <span>Likes {profile.likes}</span>
            </div>
        );
}

Aren't you getting the wrong info out of this.state in your render function? I think it would be const { data } = this.state — Andrew
– Andrew, Commented Mar 4, 2018 at 22:23

David L. Walsh · Accepted Answer · 2018-03-04 22:24:01Z

2

Before mounting - and on the initial render - your state looks like this:

{
  data: {}
}

After mounting - on the second render - your state looks like this:

{
  data: {
    notifications: 12,
    profile: {
      likes: 5
    }
  }
}

You're trying to access this.state.profile.likes which doesn't exist. Presumably you mean to access this.state.data.profile.likes which does exist, but only on the second render.

answered Mar 4, 2018 at 22:24

David L. Walsh

24.9k10 gold badges63 silver badges50 bronze badges

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

Comments

Xirb · Accepted Answer · 2018-11-14 11:05:13Z

2

I noticed this while also trying to fix the same problem. The constructor should be:

 constructor(props) {
    super(props);
    this.state = {
        data: {
            profile: {}
        }
    };
 }

Always initialize objects within objects

answered Nov 14, 2018 at 11:05

Xirb

951 gold badge1 silver badge8 bronze badges

1 Comment

Abraham Over a year ago

I had the same issue and this saved me! and yeah you will need to initialize each object, and since profile is another object you will need to initialize it too

temakozyrev · Accepted Answer · 2018-03-04 22:23:50Z

0

https://reactjs.org/docs/react-component.html#mounting

render -> componentDidMount

put state data in constructor

answered Mar 4, 2018 at 22:23

temakozyrev

3721 silver badge7 bronze badges

5 Comments

Andrew Over a year ago

It doesn't matter where you place it. As long as the function eventually gets called, it will end up on the DOM.

temakozyrev Over a year ago

first - render; second - componentDidMount; this.state.profile.likes in render -- error

temakozyrev Over a year ago

You can not access non-existent data. There is a violation of react lifecycle

Andrew Over a year ago

Oh, you're right in that regard. Trying to access a key in undefined. But I'm pretty sure that's not OPs error.

totalnoob Over a year ago

this was more so an example of using fetch in the mount to get data to populate it into setState so I wouldn't be putting the state data in the constructor. should i be using componentwillmount instead?

Collectives™ on Stack Overflow

can't access object's properties within object in react

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related