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

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

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

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

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

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

• javascript
• reactjs

• So you are saying console.log(this.props.myData) is printing an object and console.log(this.props.myData.title) is undefined if you print them at the same constructor ? – Matthew Barbara Commented Sep 8, 2018 at 23:18
• @MatthewBarbara Yes. – Andy Hoffman Commented Sep 8, 2018 at 23:19
• what is the type of myData ? is it back from mongodb query or so ? – Tareq Commented Sep 8, 2018 at 23:25
• Object.keys(this.props.myData).forEach((key) => { console.log(key + ': ' + this.props.myData[key]); }); you can use Object.values for values – Hemadri Dasari Commented Sep 9, 2018 at 0:31

4 Answers 4

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 ponent 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 ponent, it never updates in the console, like your first example does.

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

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

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

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 ponent 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.