React props object data is undefined

Question

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

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

Answer 1

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.