ReactJS: [ this.props ] being impossibly different to [ props in this ]

Question

In a continuous section of code called inside componentDidMount:

console.log('hv props');
for(var i = 0; i<20; i++){
    console.log(this);
    console.log(this.props);
}
console.log('hv props end');

this is supposed to be having this.props.account.

in all

console.log(this);

this.props.account is an object with fields.

However, in all

console.log(this.props);

this.props.account is null. (the account field of this.props is null)

I have placed this section in different parts of my program, and i have tried adding a time consuming process between console.log(this) and console.log(this.props), but this is still the case.

What could have caused this? Thank you.

`console.log` won't necessarily show you the structure the object has at the time it is logged, but the structure it has when you clicked the triangle to inspect it. In the meantime (between logging and inspecting in the console) the component might have been rerendered with new props. Keep in mind that `componentDidMount` is only called when the component is rendered/mounted the first time, not on subsequent renders. See http://stackoverflow.com/q/41492035/218196 which is a similar problem. — Felix Kling, Jan 06 '17 at 08:00
I see you commented on the deleted answer. The answer is likely correct. Your case does not appear to be differentt. Try: `var obj = {props: {account: null}}; console.log(obj); console.log(obj.props); void obj.props = {account: 'not null' };` in the browser console. Expand the first log. Note how it shows `account: "not null"` even though the second log shows `account: null`. Of course this is still just an assumption. To provide an absolute definite answer we would have to know your code. — Felix Kling, Jan 06 '17 at 08:54
Also note that the loop is completely irrelevant. The value of `this.props` won't change while the loop runs since the loop is blocking. If any, delay the execution of `console.log(this.props)` by doing `setTimeout(() => console.log(this.props), 2000)`. — Felix Kling, Jan 06 '17 at 08:59
setTimeout(() => console.log(this.props), 2000)'s props did hv account obj not null. THX dude. too bad that ans somehow got deleted. can u reanswer this and i will mark u correct? — Uchiha Javara, Jan 06 '17 at 10:18

score 2 · Accepted Answer · edited May 23 '17 at 12:24

console.log won't necessarily show you the structure the object has at the time it is logged, but the structure it has when you clicked the triangle to inspect it. In the meantime (between logging and inspecting in the console) the component might have been rerendered with new props. See Can't iterate over my array/object. Javascript, React Native for basically the same problem.

Here is an example that demonstrates the issue (open your browser console):

var obj = {props: {account: null}};
console.log(obj);
console.log(obj.props);
obj.props = {account: 'not null' };

Note how it shows account: "not null" even though the second log shows account: null:

I bet if you delay the evaluation of console.log(this.props), e.g. via

setTimeout(() => console.log(this.props), 2000)

you would see the value you want.

This was just an explanation of what you are seeing. How you want to solve probably depends on the rest of your application. You certainly can't access this.props.account on mount, but you can do on subsequent renders. Keep in mind that componentDidMount is only called when the component is rendered/mounted the first time, not on subsequent renders. Have a look at the other lifecycle methods.

ReactJS: [ this.props ] being impossibly different to [ props in this ]

1 Answers1