React props object data is undefined

user_949217 0
Viewed 5286

I'm passing an object as a prop to a component.

<SomeComponent myData={props.myData}>...</SomeComponent>

In SomeComponent, when I console.log this.props.myData, it is not undefined and contains key/val pairs, as expected.

constructor(props) {
  super(props);
  console.log(this.props.myData);
  …
}

enter image description here

However, when I try to access any one of this object's properties, they are all undefined.

constructor(props) {
  super(props);
  console.log(this.props.myData.title); // undefined
  …
}

Update

The following does output the value, but I'm unclear as to why, since the object is already available without setTimeout.

constructor(props) {
  super(props);
  setTimeout(() => {
    console.log(this.props.fightData.title); // "Work plain near killed us both"
  });
  …
}
reactjs javascript
4 Answers

What you're seeing here is very likely due to how Chrome's developer tools works. When you console.log an object, and that object updates/changes, then the output in developer tools will automatically update as well to show the new object state. I'm not entirely sure why this is the case.

So probably when you do the first example, myData is actually an empty object (due to some other part of your application), but it does get filled in later, which causes your component to update and update the Chrome developer tools.

Try running your console log like this:

console.log(JSON.stringify(this.props.myData));

And see what it outputs. This will create and print a string, so it will NOT update in the developer tools when the object changes.

When you console log this.props.myData.someVar, on an empty object, it prints undefined to the console, which is not attached to any existing object. So even when the object is updated on the component, it never updates in the console, like your first example does.

This is likely only possible for a class based component, as a functional based component is recreated every time it re-renders, but a class based component just updates its props object.

user_83465130

I just encountered the exact same problem that you have.

using your example, I solved the issue by accessing this.props.myDatap[title] instead of this.props.myData.title

user_38616910

You can try below ways to read keys and values from object

Get keys from Object 

 Object.keys(this.props.myData).forEach((key) => { console.log(key + ': ' + this.props.myData[key]); });

Get values from Object 

 Object.values(this.props.myData).forEach((value) => { console.log(value + ': ' + this.props.myData[value]); });
user_69034970

As @Dr_Derp suggested (and proved) it's probably a browser 'smart feature' - browser, by 'correcting' logged object value, cheats you.

For some reason props.myData doesn't have expected value in time of running constructor (and gets it just after that) - to prove that test component with static object as prop that way:

<SomeComponent myData={{title:'test'}}>...</SomeComponent>

constructor(props) {
  super(props);
  console.log(this.props.myData.title); //     should be 'test'
  …
}

stackblitz

This way it's not <SomeComponent/> fault but his parent, the way of getting and passing data to child.

user_61246570
Related