CODEWITHSUNDEEP
javascriptreactjs
Andy Hoffman
Andy Hoffman

Reputation: 19109

React props object data is undefined

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

Upvotes: 4

Views: 7298

Answers (4)

Matthew Barbara
Matthew Barbara

Reputation: 3962

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

Upvotes: 1

xadm
xadm

Reputation: 8418

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.

Upvotes: 0

Hemadri Dasari
Hemadri Dasari

Reputation: 34014

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

Upvotes: 0

Dr_Derp
Dr_Derp

Reputation: 870

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.

Upvotes: 5

Related Questions